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 } } })
相关文章推荐
- angular中部分自带directive的scope问题
- Angular 学习之 Directive 中的scope
- [转]AngularJS Directive 隔离 Scope 数据交互
- angular中directive的scope用法
- AngularJS Directive 隔离 Scope 数据交互
- angular创建新指令directive中scope的作用以及绑定策略
- AngularJS Directive 隔离 Scope 数据交互
- AngularJS.directive系列:嵌套directive的通讯及scope研究
- AngularJS Directive 隔离 Scope 数据交互
- Angular中directive——scope选项与绑定策略,这个也经常迷惑的。
- angularjs directive 获取scope内容不正确的问题。
- AngularJS Directive 隔离 Scope 数据交互
- AngularJs directive-scope双向绑定方法处理-实例2
- Angular学习心得之directive——scope选项与绑定策略
- angular scope of directive
- angular.js学习(1)--directive指令独立scope
- AngularJs Directive Pass value/object/function to Scope
- AngularJS Directive 隔离Scope数据交互
- AngularJS Directive 隔离 Scope 数据交互
- angular directive中scope:{}