AngularJs 指令directive之controller，link，compile

hudeyong926

浏览: 2033107 次
来自: 武汉

最近访客更多访客>>

loginboot

xiaoshiyier

lncyfug

gaoshaoye

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

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

这里列出directive的合法命名：

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

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

app.directive('fractionNum',function(){
    return {
        link : function(scope, elements, attrs, controller){
            elements[0].onkeyup = function(){
                if(isNaN(this.value) || this.value<1 || this.value>10){
                    this.style.borderColor = 'red';
                }
                else{
                    this.style.borderColor = '';
                }
            };
        }
    };
});

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之require | AngularJS 服务 demo

2014-05-30 13:37
浏览 42301
评论(1)
分类:Web前端
查看更多

1 楼 q59200182 2016-05-25

能不能给个完整的demo 新手上路不会求带

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论