angularjs中关于隔离作用域的理解以及绑定策略的详细介绍
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了angularjs中关于隔离作用域的理解以及绑定策略的详细介绍，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6112字，纯文字阅读大概需要9分钟。
内容图文
本篇文章主要介绍了详解angularjs中的隔离作用域理解以及绑定策略，具有一定的参考价值，感兴趣的小伙伴们可以参考一下我们首先看下面的例子：
<!doctype html> <html ng-app="MyModule"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </head> <body> <hello></hello> <hello></hello> <hello></hello> <hello></hello> </body> <script src="framework/angular-1.3.0.14/angular.js"></script> <script src="IsolateScope.js"></script> </html>
我们在看看IsolateScope中的代码：
这时候当运行页面的时候发现只要有一个input中的输入变化了，这时候所有的nput的内容都会变化：
这样就会面临一个问题：我们的指令无法单独使用,于是就有了独立作用域的概念。
通过把scope设置为{}，那么每一个指令就具有自己独立的scope空间，于是就不会相互影响了。但是angularjs中最重要的概念是：绑定策略。其具有绑定策略如下：
第一步：我们看看原始的方式，也就是不使用上面的三种绑定方式
<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<body>
<!--控制器MyCtrl下面有指令drink，同时指令drink还有自定义的属性flavor，其值为‘百威'-->
<p ng-controller="MyCtrl">
<drink flavor="{{ctrlFlavor}}"></drink>
</p>
</body>
<script src="framework/angular-1.3.0.14/angular.js"></script>
<script src="ScopeAt.js"></script>
</html>看看ScopeAt中的内容：
这时候的DOM结构如下：
但是，这种方式要通过attrs.flavor来获取这个指令的属性值，然后需要把这个属性值绑定到scope对象上，最后在template中才能通过{{}}这种形式获取到scope中的值!
第二步：我们使用上面的@来替换第一种方式，因为它每次都需要自己指定link函数：
这种方式就是把指令drink中的flavor属性值绑定到scope对象上，而且这是ng为我们自动绑定的。不过，@绑定绑定的是字符串,而不是对象!
第三步：我们来学习一下双向数据绑定
<!doctype html> <html ng-app="MyModule"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </head> <body> <!--指定了控制器MyCtrl--> <p ng-controller="MyCtrl"> Ctrl: <br> <!--第一个输入框输入值绑定到ctrlFlavor，也就是控制器MyCtrl对应的ctrlFlavor值中--> <input type="text" ng-model="ctrlFlavor"> <br> Directive: <br> <!--第二个输入框还是通过指令的方式来完成的--> <drink flavor="ctrlFlavor"></drink> </p> </body> <script src="framework/angular-1.3.0.14/angular.js"></script> <script src="ScopeEqual.js"></script> </html>
我们再来看看控制器中内容
这就是'='这种绑定方式。其实现了双向的数据绑定策略。我们看看最后的DOM结构是怎么样的：
其实双向数据绑定<drink flavor="ctrlFlavor"></drink>是很明显的，需要好好理解双向数据绑定(指令和控制器之间的双向数据绑定)
第四步：我们使用&绑定策略来完成对controller父级方法的调用：
<!doctype html> <html ng-app="MyModule"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </head> <body> <p ng-controller="MyCtrl"> <!--接下来是三个自定义的指令greeting指令--> <greeting greet="sayHello(name)"></greeting> <greeting greet="sayHello(name)"></greeting> <greeting greet="sayHello(name)"></greeting> </p> </body> <script src="framework/angular-1.3.0.14/angular.js"></script> <script src="ScopeAnd.js"></script> </html>
其中定义了三个指令greeting,每一个指令都需要调用controller中的一个sayHello方法，（angularjs中如何实现控制器和指令之间交互指出了可以通过定义属性的方式使得控制器和指令之间进行交互，不过这里我们可以通过简单的&完成同样的功能）并且传入不同的参数name值：
通过&就可以完成对父级作用方法的调用，而不是采用传统的通过为指令指定属性的方式完成控制器和指令之间的通行!
以上就是angularjs中关于隔离作用域的理解以及绑定策略的详细介绍的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的angularjs中关于隔离作用域的理解以及绑定策略的详细介绍全部内容，希望文章能够帮你解决angularjs中关于隔离作用域的理解以及绑定策略的详细介绍所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。