天天育儿网,内容丰富有趣,生活中的好帮手!
天天育儿网 > AngularJS自定义指令directive:父类scope和指令中scope之间的通信

AngularJS自定义指令directive:父类scope和指令中scope之间的通信

时间:2021-09-17 20:44:39

相关推荐

AngularJS自定义指令directive:父类scope和指令中scope之间的通信

我们知道angularJs中,指令中有scope,父类controller中也有scope,两者的通信方式有三中,分别是

scope:false;直接使用父类的scopescope:true;继承父类的scopescope:{@,=,&}隔离的scope

但是1和2两种都有一定的缺陷,(1)直接使用父类,也就是在指令中也可以任意修父类的对象,这样使得父类对象被各种指令所修改。(2)继承父类,如果是对象传递到指令中,则可以直接造成父类的对象也修改,但是如果直接只是一个字符串,则父类的不会被修改。这个虽然比1种情况好一点,但是对于一个指令被用于多个位置的时候,项目中希望的是有些对象被修改,有些对象不会被修改。怎么样才能达到修改自如的情况,一般使用的是3种情况的scope,即隔离的scope。那么第3种情况,怎么实现传递字符串和传递对象。

1.最简单的scope

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>demo22.html</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="js/jquery-1.4.3.js"></script><script type="text/javascript" src="js/angular.min.js"></script><!--<link rel="stylesheet" type="text/css" href="./styles.css">--></head><body ng-app="app"><div ng-controller="controller"> hello:{{name}}<!--<hello body="name"></hello>--></div><script>var app = angular.module("app", []);app.controller("controller", function($scope){$scope.name = "hello";});</script></body></html>

结果是hello

2.带指令的传递字符串的scope用的是@

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>&l

如果觉得《AngularJS自定义指令directive:父类scope和指令中scope之间的通信》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。