angular directive中scope:{}

<div ng-controller="HelloController">
    {{greeting.text}}
    <test>{{greeting.text}}
    {{t}}</test>
</div>

</pre><pre name="code" class="javascript">bookStoreDirectives.directive('test',function(){
   return {
       restrict:'AE',
       scope:{},
       template:'<div>{{greeting.text}}</div>'
   }
})

模板访问不到HelloController里的greeting.text、。。。

如果是scope:true  就是在继承之后还可以有自己新的作用域。-----原型！可以追溯

新建指令可以自己创建自己的controller

bookStoreDirectives.directive('test',function(){
   return {
       restrict:'AE',
       scope:{},
       controller:function($scope){
           $scope.s='sss'
       },
       template:'<div>{{greeting.text}},{{s}}</div>'
   }
})

一个controller里都是属于一个scope。。。即使有新创建的指令，scope也是共享的。。。可以模板里使用scope里的值。

bookStoreDirectives.directive('hello',function($templateCache){
    return {
        restrict:'E',
        transclude:true,
        template:"<div><div ng-transclude></div ><input ng-model='greeting.text'></input><span ng-bind='greeting.text'></span></div>"

    //    template:$templateCache.get('h.html')
    }

})

在html中，只要使用了一个controller，，那一块就是一个scope，及时是相同的congtoller之间，也互不影响

绑定策略：

@  本地作用域同DOM属性的值进行绑定  

bookStoreDirectives.directive('drink',function(){
    return {
        restrict:'E',
        scope:{
            flavor:'@'
        },
        template:'<div>{{flavor}}</div>',
        link:function(scope,element,attr){
         //   scope.flavor=attr.flavor
        }
    }
})

<div ng-controller="drinkController">
    <drink flavor="zheshizhiling"></drink>
</div>

= 本地作用域的属性同父级作用域的属性进行双向绑定

<div ng-controller="drinkController">
    <!--<drink flavor="zheshizhiling"></drink>-->

    con:
    <input type="text" ng-model="conflavor"/>
    <br>

    drin: <drink flavor="conflavor"></drink>

</div>

bookStoreDirectives.directive('drink',function(){
    return {
        restrict:'E',
        scope:{
            flavor:'='
        },
        //  template:'<div>{{flavor}}</div>',
        template:'<input type="text" ng-model="flavor"/>',
        link:function(scope,element,attr){
         //   scope.flavor=attr.flavor
        }
    }
})

&可以对父元素进行绑定，以便在其中运行函数

bookStoreDirectives.directive('drink',function(){
    return {
        restrict:'E',
        scope:{
           say:'&'
           // flavor:'@'
        },
        template:'<input type="text" ng-model="userName"/><button class="btn btn-danger" ng-click="say({name:userName})">button</button>',
         // template:'<div>{{conflavor}}</div>',
//        template:'<input type="text" ng-model="flavor"/>',
        link:function(scope,element,attr){
         //   scope.flavor=attr.flavor
        }
    }
})

版权声明：本文为博主原创文章，未经博主允许不得转载。