从指令更改控制器 $scope

Question

我有一个控制器：

function myController($scope) {
    $scope.clicked = false;
}

和指令：

function myDirective() {
    return {
        restrict: 'E',

        link: function(scope, elem, attrs) {

            elem.bind('click', function() {
                // need to update controller $scope.clicked value
            });
        },

        template: '<div>click me</div>'; 
        replace: true;
    }
}

我是这样使用它的：

<div ng-controller="myController">
    <my-directive></my-directive>
</div>

如何更改 $scope.clicked 的控制器值？谢谢！

Answer 1

由于您不在指令中使用独立作用域，因此可以使用 scope.$parent.clicked 访问父作用域属性。

link: function(scope, elem, attrs) {
            elem.bind('click', function() {
                scope.$parent.clicked = ...
            });
        },

Answer 2

我不建议使用 scope.$parent 来更新或访问父范围值，您可以 two way bind 需要更新的控制器变量到您的指令中，因此您的指令变为：

function myDirective() {
    return {
        restrict: 'E',
        scope: {
         clicked: '='
        },
        link: function(scope, elem, attrs) {

            elem.bind('click', function() {
                // need to update controller $scope.clicked value
                $scope.clicked = !$scope.clicked;
            });
        },

        template: '<div>click me</div>'; 
        replace: true;
    }
}

现在从父clicked传递这个

<div ng-controller="myController as parentVm">
    <my-directive clicked="parentVm.clicked"></my-directive>
</div>

function myController() {
    var parentVm = this;
    parentVm.clicked = false;
}

我建议您继续阅读有关为您的控制器使用 controllerAs 语法的内容，因为这将真正巩固此处使用双向绑定的概念。

Answer 3

我喜欢将 $scope.$emit 用于此类目的。它允许将数据从指令发送到控制器。您应该在控制器中创建自定义侦听器：

$scope.$on('cliked-from-directive', function(event, data){
        console.log(data)
})

如您所见，现在您可以完全访问您的控制器范围并且可以做任何您想做的事情。在你的指令中只是使用 scope.$emit link: 函数（作用域、元素、属性）{

        elem.bind('click', function() {
          scope.$emit('cliked-from-directive', {a:10}) 
        });

这里我为你创建了jsfiddle

从指令更改控制器 $scope

change controller $scope from a directive

javascript

directive

angularjs

angularjs-scope