您的位置:首页 > 运维架构

angular directive中scope:{}

2015-05-24 12:11 176 查看
<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
}
}
})
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: