Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div ng-app="app">
​
    <div class="parent" ng-controller="MainCtrl">
        <div class="line">
            Name inside parent scope is: <strong>{{name}}</strong>
            <input type="button" ng-click="reverseName()" value="Reverse name" />
        </div>
        <div class="line">
            Color inside parent scope is: <strong style="color:{{color}}">{{color|uppercase}}</strong>
            <input type="button" ng-click="randomColor()" value="Randomize color" />
        </div>
        <div class="directive" my-directive
            name="{{name}}"
            color="color"
            reverse="reverseName()"
        ></div>
    </div>
</div>
​
</body>
</html>
 
.parent {
    border: 20px solid #676767;
    padding : 20px;
}
.parent,.directive {
    position: relative;
}
.parent:after,.directive:after {
    display: inline;
    color: #fff;
    font-size: normal;
    position: absolute;
    top:-20px;
    left:-20px;
    z-index: 100;
    padding: 1px 5px;
    background-color: rgba(0,0,0,0.5);
}
.parent:after {
    content: "MainCtrl Scope";
}
.directive {
    padding: 20px;
    border: 20px solid #cbccdd;
    margin-top: 20px;
}
.directive:after {
    content: "Directive Scope"
}
.line {
    border-bottom: 1px dotted #ccc;
    padding: 5px 0;
}
 
var app = angular.module("app", []);
​
app.controller("MainCtrl", function( $scope ){
    $scope.name = "Harry";
    $scope.color = "#333333";
    $scope.reverseName = function(){
     $scope.name = $scope.name.split("").reverse().join("");
    };
    $scope.randomColor = function(){
        $scope.color = '#'+Math.floor(Math.random()*16777215).toString(16);
    };
});
​
app.directive("myDirective", function(){
​
    return {
        restrict: "EA",
        scope: {
            name: "@",
            color: "=",
            reverse: "&"
        },
        controller: function ($scope) {
            // this.color = '#ccc';
            // var that = this;
            // this.reverse = function () {
            //     that.color="red";
            // }
        },
        controllerAs: 'vm',
        bindToController: true,
        template: [
            "<div class='line'>",
            "Name : <strong>{{vm.name}}</strong>;  Change name:<input type='text' ng-model='vm.name' /><br/>",
            "</div><div class='line'>",
            "Color : <strong style='color:{{vm.color}}'>{{color|uppercase}}</strong>;  Change color:<input type='text' ng-model='vm.color' /><br/></div>",
            "<br/><input type='button' ng-click='vm.reverse(1)' value='Reverse Name'/>"
        ].join("")
    };
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Lovesueeepro
0viewers