從指令更改控制器$ 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需要更新的控制器變量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使用controllerAs語法的內容，因為這確實可以鞏固此處使用雙向綁定的概念。

Answer 3

我喜歡將$ scope。$ emit用於此類目的。 它允許將數據從指令發送到控制器。 您應該在控制器中創建自定義偵聽器：

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

如您所見，現在您擁有對控制器作用域的完全訪問權限，並且可以做任何您想做的事情。 並且在您的指令中僅使用scope.$emit鏈接：function（scope，elem，attrs）{

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

在這里，我為您創建了jsfiddle