AngularJS指令

1.概念
•    一个指令可以用来引入新的HTML语法，指令是DOM元素上的标记，使元素拥有特定的行为。
•    指令通过对元素绑定事件监听或者改变DOM而使HTML拥有真实的交互性。

2. 指令表现形式
•    一个新的HTML元素  <data-picker></data-picker>     E
•    元素的属性<input type=”text” data-picker/>         A
•    CSS class <input type=”text” class=”data-picker”/>     C
例子：

myAppModule.directive("xingoo",function(){
                return{
                    restrict:'AECM',
                    template:'<div>hello my directive</div>',
                    repalce:true
                }
            });

a. restrict：定义了标签的使用方法，一共四种，分别是AECM
b. template：定义标签的模板。里面是用于替换自定义标签的字符串
c. repalce：是否支持替换
d. transclude：是否支持内嵌

3. Link函数
•    如果指令存在于一个controller下，它就会使用这个controller的scope。 如何运用scope，我们要用到一个叫做 link 的函数。
•    link函数主要用来为DOM元素添加事件监听、监视模型属性变化、以及更新DOM。
例子：

app.directive('helloWorld', function() {
  return {
    restrict: 'AE',
    replace: true,
    template: '<p style="background-color:{{color}}">Hello World',
    link: function(scope, elem, attrs) {
      elem.bind('click', function() {
        elem.css('background-color', 'white');
        scope.$apply(function() {
          scope.color = "white";
        });
      });
      elem.bind('mouseover', function() {
        elem.css('cursor', 'pointer');
      });
    }
  };
});

4.指令的Scope
•  父scope(scope: false) – 这是默认情况。如果你的指令不操作父scope的属性，你就不需要一个新的scope。这种情况下是可以使用父scope的。
•  子scope(scope: true) – 这会为指令创建一个新的scope，并且原型继承自父scope。如果你的指令scope中的属性和方法与其他的指令以及父scope都没有关系的时候，你应该创建一个新scope。在这种方式下，你同样拥有父scope中所定义的属性和方法。
•  隔离scope(scope:{}) – 这就像一个沙箱。当你创建的指令是自包含的并且可重用的，你就需要使用这种scope。你在指令中会创建很多scope属性和方法，它们仅在指令内部使用，永远不会被外部的世界所知晓。如果是这样的话，隔离的scope是更好的选择，隔离的scope不会继承父scope。
 

define(['angular'], function(angular){
    return angular.module('app.components.priorityStars', [])
    .directive('priorityStars', function(){
        return {
            restrict: 'E',
            scope: {
                    noteItem: '='
                },
            replace: true,
            transclude: true,
            templateUrl: 'components/priority-stars/priority-stars.html',
            controller: ['$scope', ctrlFn]
        };

        function ctrlFn($scope) {
            $scope.$watch('noteItem', function() {
                    if ($scope.noteItem) {
                        $scope.currentNoteItem = $scope.noteItem;
                    }
                });
        }
    });
});

注：’=‘ 代表双向绑定

5. controller 函数
•    如果你想要允许其他的指令和你的指令发生交互时，你需要使用 controller 函数。

define(['jquery','angular'],function($, angular){
    return angular.module('app.components.cbInput', [])
    .directive('cbInput', ['$timeout', function($timeout) {
        return {
            restrict: 'E',
            scope: {
                config:'=',
                entryTypeId: '=',
                valueSet: '='
            },
            replace: true,
            transclude: true,
            templateUrl: 'components/cb-input/cb-input.html',
            controller: ['$rootScope', '$scope', 'defaultValueService', 'entityBusiness', ctrlFn]
        };

        function ctrlFn($rootScope, $scope, defaultValueService, entityBusiness) {/
            //
        }
    }]);
});

6.参考网址
•    http://www.sitepoint.com/practical-guide-angularjs-directives/

转载于:https://www.cnblogs.com/xiaxianfei/p/5379307.html