码迷,mamicode.com
首页 > Web开发 > 详细

【转载】AngularJs 指令directive之controller,link,compile

时间:2015-06-25 10:23:44      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:

关于自定义指令的命名,你可以随便怎么起名字都行,官方是推荐用[命名空间-指令名称]这样的方式,像ng-controller。不过你可千万不要用 ng-前缀了,防止与系统自带的指令重名。另外一个需知道的地方,指令命名时用驼峰规则,使用时用-分割各单词。如:定义myDirective,使用时 像这样:<my-directive>。

这里列出directive的合法命名:

  • ng:bind
  • ng-bind
  • ng_bind
  • x-ng-bind
  • data-ng-bind

我是教师,在新建试题输入分数的时候应该只能输入数字才对,输入其他内容是不合法的,而且我希望这个分数是1~10之间的数字。能否只在输入框上加一个属性.我们定义一个叫做fractionNum的指令如下

 1 app.directive(‘fractionNum‘,function(){  
 2     return {  
 3         link : function(scope, elements, attrs, controller){  
 4             elements[0].onkeyup = function(){  
 5                 if(isNaN(this.value) || this.value<1 || this.value>10){  
 6                     this.style.borderColor = ‘red‘;  
 7                 }  
 8                 else{  
 9                     this.style.borderColor = ‘‘;  
10                 }  
11             };  
12         }  
13     };  
14 });  

link的值是一个函数,用来定义指令的行为。从传入的参数中可以获取到当前元素,我们便可以拿当前元素开刀了。我在此处监听当前元素的keyup事件,获取元素的值,如果不是1~10之间的数字,则把输入框的边框颜色变为红色。这下这个指令就可以工作了。定义好的指令就可以在模板中使用了,使用方法如下:

  

分数:<input type="text" ng-model="question.fraction" fraction-num /><br /> 

controller,link,compile有什么不同

//directives.js增加exampleDirective  
phonecatDirectives.directive(‘exampleDirective‘, function() {  
    return {  
        restrict: ‘E‘,  
        template: ‘<p>Hello {{number}}!</p>‘,  
        controller: function($scope, $element){  
            $scope.number = $scope.number + "22222 ";  
        },  
        //controllerAs:‘myController‘,  
        link: function(scope, el, attr) {  
            scope.number = scope.number + "33333 ";  
        },  
        compile: function(element, attributes) {  
            return {  
                pre: function preLink(scope, element, attributes) {  
                    scope.number = scope.number + "44444 ";  
                },  
                post: function postLink(scope, element, attributes) {  
                    scope.number = scope.number + "55555 ";  
                }  
            };  
        }  
    }  
});  
  
//controller.js添加  
dtControllers.controller(‘directive2‘,[‘$scope‘,  
    function($scope) {  
        $scope.number = ‘1111 ‘;  
    }  
]);  
  
//html  
<body ng-app="phonecatApp">  
    <div ng-controller="directive2">  
        <example-directive></example-directive>  
    </div>  
</body>  

运行结果:

Hello 1111 22222 44444 55555 !  

  

由结果可以看出来,controller先运行,compile后运行,link不运行(link就是compile中的postLink)。
 
 
将上例中的compile注释掉运行结果:
Hello 1111 22222 33333 !    

 由结果可以看出来,controller先运行,link后运行,link和compile不兼容。compile改变dom,link事件的触发和绑定
 

【转载】AngularJs 指令directive之controller,link,compile

标签:

原文地址:http://www.cnblogs.com/baobaodong/p/4599196.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!