Angularjs - directive | 易学教程

1. What are Directives

Directives are one of the most powerful features of AngularJS. You can imagine them as building blocks ( aka re-usable components ) of any AngularJS application. Mastering all the directives, is totally out of this article’s scope. For that, I would really recommend this book; it covers everything you need to know about directives. Here, we’ll discuss one aspect of directives called : “Directive scope”.

var app = angular.module("test",[]);
app.directive("myDirective",function(){
  return {
      restrict: "EA",
      scope: true,
      link: function(scope,elem,attr){
          // code goes here ...
      }
  }    
 });

2. Scopes in AngularJS

a. Scope : False ( Directive uses its parent scope )

var app = angular.module("test",[]);

app.controller("Ctrl1",function($scope){
    $scope.name = "Harry";
    $scope.reverseName = function(){
        $scope.name = $scope.name.split('').reverse().join('');
    };
});
app.directive("myDirective", function(){
    return {
        restrict: "EA",
        scope: false,
        template: "<div>Your name is : {{name}}</div>"+
        "Change your name : <input type='text' ng-model='name' />"
    };
});

View Code

b. Scope : True ( Directive gets a new scope )

var app = angular.module("test",[]);

app.controller("Ctrl1",function($scope){
    $scope.name = "Harry";
    $scope.reverseName = function(){
        $scope.name = $scope.name.split('').reverse().join('');
    };
});
app.directive("myDirective", function(){
    return {
        restrict: "EA",
        scope: true,
        template: "<div>Your name is : {{name}}</div>"+
        "Change your name : <input type='text' ng-model='name' />"
    };
});

The "name" inside template, when update it, it won't affect the name in controller.

　 c. Scope : { } ( Directive gets a new isolated scope )

Then "name" inside Directive have nothing with the "name" inside controller

3. Can we pass some values from the parent scope to the directives now?

Yes ! Not only that, we might need to handle situations like invoking callbacks in parent scope, two-way binding between parent & directives scope ..etc

<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>

View Code

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: "&"
        },
        template: [
            "<div class='line'>",
            "Name : <strong>{{name}}</strong>;  Change name:<input type='text' ng-model='name' /><br/>",
            "</div><div class='line'>",
            "Color : <strong style='color:{{color}}'>{{color|uppercase}}</strong>;  Change color:<input type='text' ng-model='color' /><br/></div>",
            "<br/><input type='button' ng-click='reverse()' value='Reverse Name'/>"
        ].join("")    
    };
});

View Code

There’re 3 types of prefixes AngularJS provides.

1. "@"   (  Text binding / one-way binding )
2. "="   ( Direct model binding / two-way binding )
3. "&"   ( Behaviour binding / Method binding  )

来源：https://www.cnblogs.com/yk00/p/5142937.html

标签

directive

angular