anjular js ---directive常用指令使用

anjular 定义 指令就是相当于重新创建 html 标签或者属性

例如 :app.directive(‘telBox’, [function () {}]);

可以在html 使用 <telBox></telBox>

本篇主要介绍指令返回 的参数设置，这也是指令最主要的部分:

restrict

声明标示符如何使用，可以作为元素，属性，类，注释或组合，取值有
E(元素),A(属性),C(类),M(注释)，其中默认值为A；

用法如下:

E(元素)：<directiveName></directiveName>
A(属性)：<div directiveName='expression'></div>
C(类)：   <div class='directiveName'></div>
M(注释)：<--directive:directiveName expression-->

replace

布尔型，默认值为false，设置为true的时候，表示可以用模板内容替换自定义的元素标签（自定义标签不再渲染结果中） ,
设置为true的渲染情况 <div>message</div>
默认情况下 <hello><div>message</div></hello>

templateUrl

可以是以下两个内容:
(1) 一个代表HTML文件路径的字符串
(2) 一个函数，可接受两个参数tElement和tAttrs
例如:

app.directive('hello', function() {
  return {
    replace: true,
    templateUrl: function(element, attrs) {
      return '<div>'+ attrs.title +'</div>'
    }
  };
});

或者

app.directive('telBox', [function () {
        return {
            restrict: 'AE',
            replace:true,
            templateUrl: "js/views/telBox.html"
            }
            ]
            )

使用templateUrl 必须要在服务器上运行

template

(1) html纯文本
(2) 一个函数，可接受两个参数tElement和tAttrs

angular.module("app",[]).directive("directitle",function(){
             return{
              restrict:'EAC',
              template: function(tElement,tAttrs){
                 var _html = '';
                 _html += '<div>'+tAttrs.title+'</div>';
                 return _html;
              }
             };
         })

HTML代码：

<directitle title='biaoti'></directitle>

scope

布尔值或者对象，可选参数，默认值为false，表示继承父级作用域。

如果值为true，表示继承父作用域，并创建自己的作用域（子作用域）

如果为对象，{}，则表示创建一个全新的隔离作用域。

当scope设置为 {} ,hello指令产生了隔离作用域，没办法从父级作用域中继承到color的值了,这个时候需要让隔离作用域读取到父及作用域

使用@来进行单向文本（字符串）绑定

<div ng-app="app" ng-controller="Controller">
    <input type="text" ng-model="color" placeholder="Entercolor"/>
    <hello-world color-attribute="{{color}}"></hello-world>
</div>
angular.module('app', [])
.controller('Controller', function($scope) {
})
.directive('hello', function() {
    return {
        restrict: 'EA',
        scope: {
            color: '@colorAttribute' //如果为color 就可              以省略，直接@
        },
        replace: true,
        template: '<div style="background-color:{{color}}">Hello!</div>'
    }
})

使用’=’进行双向绑定

<div ng-app="app" ng-controller="Controller">
    <input type="text" ng-model="color" placeholder="Entercolor"/>
    <br />
    {{ color }}
    <!-- 这里要注意写法与@绑定的不同 -->
    <hello color="color"></hello>
</div>
angular.module('app', [])
.controller('Controller', function($scope) {
    $scope.color = 'green';
})
.directive('hello', function() {
    return {
        restrict: 'EA',
        scope: {
            color: '='
        },
        replace: true,
        template: '<div><p style="background-color:{{color}}">' +
            'Hello world!' +
        '</p>' + 
        '<input type="text" ng-model="color"></div>'
    }
})

使用’&’调用父作用域中的函数

<div ng-app="app" ng-controller="Controller">
    <input type="text" ng-model="name" placeholder="Enter name"/>
    <br />
    {{ name }}
    <hello say="say()" name="{{name}}"></hello-world>
</div>
angular.module('app', [])
.controller('Controller', function($scope) {
    $scope.name = "qingmei";
    $scope.say = function() {
        alert('hello world!');
    }
})
.directive('hello', function() {
    return {
        restrict: 'EA',
        scope: {
            name: '@',
            say: '&'
        },
        replace: true,
        template: '<button type="button" ng-bind="name" ng-init="say()"></button>'
    }
})

link

链接函数负责将作用域和DOM进行链接。
可以简单理解为，当directive被angular 编译后，执行该方法

link: function (scope, ele, attr) {

                var boxHeight = $('.telBox h4').height() + 84;
                var top = $(window).height()/2 - boxHeight/2;
                var left = $(window).width()/2 - 120;

                $('.telBox').css({
                            top: top,
                            left: left,
                            height: boxHeight
                })

                scope.hideModal = function() {
                    scope.show = false;
                }


            }

link中的第一个参数scope基本上就是return中的那个scope参数；

element简单说就是$(‘my-dialog’)，即directive中第一个参数的名字；

attrs是个map，内容是你这个directive上的所有属性。例如：你在页面上如果这样写了directive:

<my-dialog type="modal" animation="fade"></my-dialog>

那attrs就是：
{
type: ‘modal’,
animation: ‘fade’
}

来自

http://www.jianshu.com/p/ca0c0ca05f77

https://segmentfault.com/a/1190000005851663