var myModule里=角。模块(“MyModule里”,[]);
myModule里。指令(“hello”,函数(){
返回{
限制:“AE”,
模板:“& lt; div> & lt;输入类型=拔谋尽眓g-model="用户名"/在{{userName}} & lt;/div>”,
替换:真
}
});之前
这时候当运行页面的时候发现只要有一个输入中的输入变化了,这时候所有的nput的内容都会变化:
这样就会面临一个问题:我们的指令无法单独使用,于是就有了独立作用域的概念。
var myModule里=角。模块(“MyModule里”,[]);
myModule里。指令(“hello”,函数(){
返回{
限制:“AE”,
范围:{},
模板:“& lt; div> & lt;输入类型=拔谋尽眓g-model="用户名"/在{{userName}} & lt;/div>”,
替换:真
}
}）;
之前
通过把范围设置为{},那么每一个指令就具有自己独立的范围空间,于是就不会相互影响了。但是angularjs中最重要的概念是:绑定策略。其具有绑定策略如下:
<强>第一步:我们看看原始的方式,也就是不使用上面的三种绑定方式
& lt; !doctype html>
& lt; html ng-app=" MyModule里"比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;链接rel="样式表" href=" https://www.yisu.com/zixun/css/bootstrap-3.0.0/css/bootstrap.css " rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”比;
& lt;/head>
& lt; body>
& lt; !——控制器MyCtrl下面有指令喝酒,同时指令喝还有自定义的属性气息,其值为“百威”——比;
& lt; div ng-controller=癕yCtrl”比;
& lt;喝味道=" {{ctrlFlavor}}”祝辞& lt;/drink>
& lt;/div>
& lt;/body>
& lt;脚本src=" https://www.yisu.com/zixun/framework/angular-1.3.0.14/angular.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/ScopeAt.js "祝辞& lt;/script>
& lt;/html>之前
看看ScopeAt中的内容:
var myModule里=角。模块(“MyModule里”,[]);
myModule里。控制器(“MyCtrl”,“美元范围”,函数(范围美元){
美元scope.ctrlFlavor="百威”;//在控制器中美元范围中设置了ctrlFlavor属性
}))//定义了喝指令
myModule里。指令(“喝”,函数(){
返回{
限制:“AE”,
模板:“& lt; div>{{味道}}& lt;/div>”,
链接:函数(范围、元素attrs) {
scope.flavor=attrs.flavor;//链接的时候把喝指令上的味道属性放在范围中,然后在模板中显示
}
}
});之前
这时候的DOM结构如下:
但是,这种方式要通过attrs.flavor来获取这个指令的属性值,然后需要把这个属性值绑定到范围对象上,最后在模板中才能通过{{}}这种形式获取到中范围的值!
<强>第二步:我们使用上面的@来替换第一种方式,因为它每次都需要自己指定联系函数:
var myModule里=角。模块(“MyModule里”,[]);
myModule里。控制器(“MyCtrl”,“美元范围”,函数(范围美元){
美元scope.ctrlFlavor="百威”;//在控制器中美元范围中设置了ctrlFlavor属性
}))//定义了喝指令
myModule里。指令(“喝”,函数(){
返回{
限制:“AE”,
范围:{
味道:“@”
}，
模板:“& lt; div>{{味道}}& lt;/div>”
}
}）;
