指令如果不设置独立scope ，会互相影响，无法独立使用。
设置独立scope：###
<html>
<head>
<meta charset="utf-8">
<title>指令 scope</title>
<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app='myApp' >
<chaoren str = "{{ctrStr}}"></chaoren>
<chaoren str = "{{ctrStr}}"></chaoren>
<chaoren str = "{{ctrStr}}"></chaoren>
<script>
var mainApp = angular.module("myApp", []);
mainApp.directive("chaoren", function() {
return {
scope: {},//<---- 设置独立scope
template: "<input ng-model='str'/><p>{{str}}</p>",
}
});
</script>
</body>
</html>
独立scope的绑定：###
<body ng-app='myApp' ng-controller = 'ctr'>
<input ng-model="ctrStr"/>
<chaoren str = "{{ctrStr}}"></chaoren>
<script>
var mainApp = angular.module("myApp", []);
mainApp.controller("ctr",function($scope){
$scope.ctrStr = "ctrssStr"
});
mainApp.directive("chaoren", function() {
return {
scope: {},
template: "<input ng-model = 'str'/>",
link: function(scope,ele,attr){//<-------
scope.str = attr.str;//测试只能赋值一次 input框变化后 不会跟着变
}
}
});
</script>
三种绑定策略：
@ ：把当前属性当字符串传递，还可以绑定外层scope的值，在属性值中插入{{}}即可；
= ：与父scope进行双向绑定 ；
&：传递一个来自父scope的函数，稍后调用；
所以上面的可将link省去， 更改为：
@###
//@
<body ng-app='myApp' ng-controller = 'ctr'>
<input ng-model="ctrStr"/>
<chaoren str = "{{ctrStr}}"></chaoren>
<script>
var mainApp = angular.module("myApp", []);
mainApp.controller("ctr",function($scope){
$scope.ctrStr = "ctrssStr"
});
mainApp.directive("chaoren", function() {
return {
scope: {str:'@'},
template: "<input ng-model = 'str'/>",
}
});
</script>
</body>
=###
<body ng-app='myApp' ng-controller = 'ctr'>
<input ng-model="ctrStr"/>
<chaoren str = "ctrStr"></chaoren>
<script>
var mainApp = angular.module("myApp", []);
mainApp.controller("ctr",function($scope){
$scope.ctrStr = "ctrssStr"
});
mainApp.directive("chaoren", function() {
return {
scope: {str:'='},
template: "<input ng-model = 'str'/>",
}
});
</script>
</body>
————————————————————————————
& 单独例子
<html>
<head>
<meta charset="utf-8">
<title>指令 </title>
<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app='myApp' ng-controller = 'ctr'>
<chaoren greet = 'sayHello(name)'></chaoren>
<script>
var mainApp = angular.module("myApp", []);
mainApp.controller("ctr",function($scope){
$scope.sayHello = function(name){
alert(name + 'hello!');
}
});
mainApp.directive("chaoren", function() {
return {
scope: {greet:'&'},
template: "<input ng-model = 'userName'/>"
+ "<button ng-click ='greet({name:userName})'>say</button>"
}
});
</script>
</body>
</html>
网友评论