Angular指令一

    Angular指令一

   

　　 通过AngularJS模块API中的 .directive() 方法，我们可以通过传入一个字符串和一个函数来 注册一个新指令。其中字符串是这个指令的名字，指令名应该是驼峰命名风格的(除了第一个单词外其他单词首 字母大写，中间不加空格)，函数应该返回 一个对象。

 

指令内容：

 

　　restrict 四种格式：元素（E）、属性（A）、类（C）或注释（M）；

      scope：{   }独立隔离作用域，作用域之间不影响，意味着指令有了一个属于自己的 $scope 对象，这个对象只能在指令的方法中或指令的模板字符串中使用；

      controller：function(){} 指令可以有它自己的控制器，指令内部创建方法给外部指令引用；

      link里面写指令内部的事件；

 

scope的绑定策略

 

      @   把当前属性作为字符串传递。还可以绑定来自外部scope的值，在属性值中插入{{}}即可。当作用域中属性私有时@someAttr；

 

<div my-directive  my-url="http://google.com" my-link-text="Click me to go to Google"></div>

angular.module('myApp', [])
.directive('myDirective', function() {
    return {
    restrict: 'A',
    replace: true,
    scope: {
        myUrl: '@', //绑定策略
        myLinkText: '@' //绑定策略
        },
        template: '<a href="{{myUrl}}">' +
        '{{myLinkText}}</a>'
    };
});

结果如图

 

　　=    与父scope中的属性进行双向绑定；

<label>Their URL field:</label>
        <input type="text" ng-model="theirUrl">
        <div my-directive some-attr="theirUrl" my-link-text="Click me to go to Google"></div>

angular.module('myApp', [])
.directive('myDirective', function() {
    return {
    restrict: 'A',
    replace: true,
    scope: {
    myUrl: '=someAttr', // 经过了修改
    myLinkText: '@'
    },
    template: '
    <div>
    <label>My Url Field:</label>
    <input type="text"
    ng-model="myUrl" />
    <a href="{{myUrl}}">{{myLinkText}}</a>
    </div>'
    };
});

结果如图

　　&  传递一个来自父scope的函数，稍后调用；