问题描述
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：不负责任未经验证的提供几个思路：1.把addTaskClassBoxDisplay放到对象下面，例如scope.obj.addTaskClassBoxDisplay = true2.使用消息3.使用service
以上3种方法也是angular通用的模块间共享数据的方式，可分别适应不同场景。
回答2：http://stackoverflow.com/questions/14115701/angularjs-create-a-directi...
<!DOCTYPE html><html xmlns='http://www.w3.org/1999/xhtml'><head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8' /> <title></title> <script src='http://apps.bdimg.com/libs/angular.js/1.3.13/angular.js'></script> <script>var app = angular.module(’plunker’, []);app.controller(’MainCtrl’, function ($scope) { $scope.name = true;});app.directive(’myDirective’, function ($compile) { return {restrict: ’AE’, //attribute or elementscope: { myDirectiveVar: ’=’, //bindAttr: ’=’},template: ’<button>’ + ’click me</button>’,replace: true,//require: ’ngModel’,link: function ($scope, elem, attr, ctrl) { elem.bind(’click’, function () {$scope.$apply(function () { $scope.myDirectiveVar = !$scope.myDirectiveVar;}); }); console.debug($scope); //var textField = $(’input’, elem).attr(’ng-model’, ’myDirectiveVar’); // $compile(textField)($scope.$parent);} };}); </script></head><body ng-app='plunker' ng-controller='MainCtrl'> This scope value <input type='checkbox' ng-model='name'> <my-directive my-directive-var='name'></my-directive></body></html>回答3：
先开一个独立的scope，对scope的一个对象用‘=’来进行双向绑定,就如下面的例子，指令的obj跟addTaskClassBoxDisplay 对象进行了绑定跟传输
angular.module(’todoWithAngularApp’).directive(’index’, function () { return {restrict: ’E’,scope:{ ’obj’: ’=obj’},templateUrl: ’/scripts/template/index.html’,replace: true,link: function (scope, iElement, iAttrs) {} };========================<index obj='addTaskClassBoxDisplay '></index>回答4：
在你问这个问题之前，我先纠正一下问题。 你想修改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的scope2.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的属性。（千万别这么做） 要上班了，后边的你自己百度吧。
回答5：http://www.hubwiz.com/course/54f3ba65e564e50cfccbad4b/基础： http://www.hubwiz.com/course/547c3e3b88dba0087c55b4e5/
回答6：非常好的问题，我也想问的
