Angular控制器和指令的交互

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的属性

angularjs

阅读 13.5k

6 个回答

得票最新

yisbug

发布于
2015-07-01

新手上路，请多包涵

不负责任未经验证的提供几个思路：
1.把addTaskClassBoxDisplay放到对象下面，例如
scope.obj.addTaskClassBoxDisplay = true
2.使用消息
3.使用service

以上3种方法也是angular通用的模块间共享数据的方式，可分别适应不同场景。

Chobits

7.4k2827

发布于
2015-07-01

更新于
2015-07-01

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 element
                scope: {
                    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>

临江若仙

1322

发布于
2015-07-07

更新于
2015-07-07

先开一个独立的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>

limerick

722

发布于
2015-07-08

在你问这个问题之前，我先纠正一下问题。
你想修改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的属性。（千万别这么做）
要上班了，后边的你自己百度吧。

已注销

811

发布于
2015-07-08

http://www.hubwiz.com/course/54f3ba65e564e50cfccbad4b/
基础： http://www.hubwiz.com/course/547c3e3b88dba0087c55b4e5/

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进