HTML部分
<index></index>
指令
angular.module('todoWithAngularApp').directive('index', function () {
return {
restrict: 'E',
templateUrl: '/scripts/template/index.html',
replace: true,
link: function (scope, iElement, iAttrs) {
console.log(scope);
console.log(iElement);
console.log(iAttrs);
iElement.on('click', '#addTaskClass', function(event) {
scope.addTaskClassBoxDisplay = true;
console.log(scope.addTaskClassBoxDisplay);
})
}
};
控制器
angular.module('todoWithAngularApp').controller('IndexCtrl', function ($scope) {
$scope.addTaskClassBoxDisplay = false;
});
怎样才能让指令去修改控制器上的$scope的属性
不负责任未经验证的提供几个思路:
1.把addTaskClassBoxDisplay放到对象下面,例如
scope.obj.addTaskClassBoxDisplay = true
2.使用消息
3.使用service
以上3种方法也是angular通用的模块间共享数据的方式,可分别适应不同场景。
http://stackoverflow.com/questions/14115701/angularjs-create-a-directi...
先开一个独立的scope,对scope的一个对象用‘=’来进行双向绑定,就如下面的例子,指令的obj跟addTaskClassBoxDisplay 对象进行了绑定跟传输
在你问这个问题之前,我先纠正一下问题。
你想修改controller的$scope。首先你自己定义的指令就是用的controller中的scope。它没有继承或者独立出来一个scope。所以你修改你指令的scope下的属性肯定会修改引用这个指令的controller的scope对应属性。
你可能会问,为何我写的这个没有修改controller的scope呢?
原因在于你使用了
iElement.on('click', '#addTaskClass', function(event) {
scope.addTaskClassBoxDisplay = true;
你自己定义的click监听器,触发修改scope属性,它不会通知angular进行脏检查的。也就是说你修改了addTaskClassBoxDisplay,它在页面上也不会有反应的。
如何修改这个错误。 增加 $apply()即可。手动触发脏检查。怎么用,自行百度。
接下来回到你的问题。如何来让directive修改controller的scope。
一、首先从directive内部属性说起。
directive的scope属性,它的三种方法都可以修改controller的scope。
1.scope不定义或者scope:false。它是直接用的controller的scope
2.scope:true。它是继承controller的scope。这时候,你要修改的内容最好定义为一个对象。
3.scope:{key:'=key'}。它是独立出一个scope。修改方法同上,最好定义为对象
然后再讲一个。使用 iAttrs,将它定义给指令上的一个属性。
var model = $parse(iAttrs.addTaskClassBoxDisplay);
iElement.on('click', '#addTaskClass', function(event) {
model.assign(scope,true);
scope.$apply();
二、使用广播。具体百度。
三、使用service来传递。
四、指令调用$rootScope 然后让controller的scope属性等于$rootScope的属性。(千万别这么做)
要上班了,后边的你自己百度吧。
http://www.hubwiz.com/course/54f3ba65e564e50cfccbad4b/
基础: http://www.hubwiz.com/course/547c3e3b88dba0087c55b4e5/
非常好的问题,我也想问的