angular学习笔记（一）

angular学习笔记(一):angular指令

angular指令的优先级

angular指令中大部分指令都是忽略了这个参数，默认值为0，但是在某些情况下设置这个参数还是非常有用的，比如ng-repeat指令的参数设置为1000，那么在统一元素上他就会比别的指令先执行，那么他的优先级就是最高的。

但是如果两个指令的优先级参数是一样的，那么就按照指令的顺序来先后执行,像ng-repeat在所有指令中的优先级是最高的,另外ng-init指令一般会以非零的优先级执行，如果想要先执行你想要的指令，那就要给这个参数设置一个高一点的值(一般非零即可，100之类的)

但是怎么设置这个参数呢？

angular.module('myApp',[]).directive('myDirective',function(){
    return {
        priority:100;//这个参数就是设置这个指令的优先级的
    }
})

angular指令的布尔参数(terminal)

这个参数有两个值，true或false，假如这个指令的这个参数的值为false的话就基本没什么问题，当然默认就是true，但是如果这个值设置成了false，那么比这个指令优先级低的指令就不会在执行，所以当一个指令的这个布尔值设置为false，那么比这个指令优先级高的话或者相同的话没什么影响

angualr指令隔离作用域的绑定策略

1、'@'策略，就是将本地作用域和DOM属性中的值绑定在一起（属性值是父作用域里面的属性），eg：

<body ng-app="myApp"> 
    <div my-title='sujunfei' my-directive>
        
    </div>
<script>
    var app=angular.module('myApp',[]);
    app.directive('myDirective',function(){
        return {
            restrict:'EA',
            template:'<div>{{myTitle}}</div>',//假如里面的不是myTitle,而是title,那么下面的测，策略就是'@myTitle'
            scope:{
                myTitle:'@'
            }
        }
    })
</script>
</body>

这里没有体现出为什么非要是父作用域的属性

<div my-title='sujunfei' ng-controller="myController">
    <div my-directive>
        
    </div>
</div>

假如html结构变成上面那样，那么就不会引用到DOM中的属性my-title中的值

2、'='策略，'='策略值不是简单的一个字符串是一个对象，具体用法同上面的@差不多，就是一个是字符串，一个是对象

<body ng-app="myApp"> 
<div ng-controller="myController">
    <input type="text" ng-model="test">
    <my-directive model='test'></my-directive>
</div>
<script>
    var app=angular.module('myApp',[]);
    app.controller('myController',function($scope){
        
    });
    app.directive('myDirective',function(){
        return {
            restrict:'EA',
            template:'<input ng-model="model" />',
            scope:{
                model:'='
            }
        }
    })
</script>
</body>

这个例子实现了两个输入框的双向绑定

3、'&'策略，就是对父作用域进行绑定，将其中的元素属性封装成一个函数，无论这个属性值是一个字符串还是一个对象还是函数方法，都会被封装成一个无参函数

<body ng-app="myApp"> 
<div ng-controller="myController">
    <div get-name='name' my-directive>
        
    </div>
</div>
<script>
    var app=angular.module('myApp',[]);
    app.controller('myController',function($scope){
        $scope.name='sujunfei';
    });
    app.directive('myDirective',function(){
        return {
            restrict:'EA',
            template:'<div>{{myname}}</div>',
            scope:{
                getName:'&'
            },
            controller:function($scope){
                $scope.myname=$scope.getName();
            }
        }
    })
</script>
</body>

当然你也可以给他传一个参数

<body ng-app="myApp"> 
<div ng-controller="myController">
    <div ng-model='name' get-name='showName(name)' my-directive>
        
    </div>
</div>
<script>
    var app=angular.module('myApp',[]);
    app.controller('myController',function($scope){
        $scope.showName=function(name){
            console.log(name);
        }
    });
    app.directive('myDirective',function(){
        return {
            restrict:'EA',
            template:'<input type="text" ng-model="name" />\
            <button ng-click="getName({name:name})">点击显示</button>\
            ',
            scope:{
                getName:'&'
            }
        }
    })
</script>
</body>

posted @ 2015-12-04 16:19 sjffly 阅读(177) 评论(0) 收藏举报

刷新页面返回顶部

sjffly