指令链接中的范围变量不会更新到指令控制器使用 Angular 读取它时答案

【问题标题】：Scope variable in Directive Link is not updated to when Directive Controller reads it using Angular指令链接中的范围变量不会更新到指令控制器使用 Angular 读取它时
【发布时间】：2016-03-02 22:35:49
【问题描述】：

这是我的代码

    var directive = {
        restrict: 'E',
        templateUrl: '/static/myTemplate.html',
        scope: {
        },
        controller: ["$scope", controllerFunc],
        controllerAs: 'multiCheckboxCtrl',
        bindToController: true,
        link: linkFunc,

    };

    return directive;


    function controllerFunc($scope) {

        // $watch List

        /**
         * Event handler for searchText change
         */
        $scope.$watch(angular.bind(this, function () {
            return $scope.multiCheckboxCtrl.clickedElsewhere.value;
        }), function (newVal) {
            if (newVal !== undefined && newVal !== "") {
                console.log(newVal);
                console.log("I am here");
            }
        });


    }

    function linkFunc(scope, element, attr){

        // Detect Element Click Logic
        scope.multiCheckboxCtrl.clickedElsewhere = {value: false};

        $document.on('click', function(){
            scope.multiCheckboxCtrl.clickedElsewhere.value = false;
            console.log(scope.multiCheckboxCtrl.clickedElsewhere);
        });

        element.on('click', function(){
            event.stopPropagation();
            scope.multiCheckboxCtrl.clickedElsewhere.value = true;
            console.log(scope.multiCheckboxCtrl.clickedElsewhere);
        });
        // End Detect Element Click Logic

    }

linkFunc 基本判断指令元素是否被点击。

我验证了每当点击指令元素时，它控制台为真，当点击指令元素之外的任何元素时，它控制台为假。

但是，我在控制器中的 $watch 似乎没有捕捉到变化。

谁能告诉我出了什么问题

谢谢

【问题讨论】：

尝试在scope.$apply() 之后添加到您的事件侦听器函数。像这样$document.on('click', function(){ scope.multiCheckboxCtrl.clickedElsewhere.value = false; console.log(scope.multiCheckboxCtrl.clickedElsewhere); scope.$apply() })

标签： javascript jquery angularjs angularjs-directive

【解决方案1】：

Angular 不知道事件监听器中的对象属性发生了变化。

正如documentation 所说：

$apply() 用于从 Angular 框架外部执行 Angular 表达式。（例如来自浏览器DOM events、setTimeout、XHR 或第三方库）。因为我们正在调用 Angular 框架，所以我们需要执行适当的异常处理范围生命周期，执行 watch。

jsfiddle 上的实时示例。

angular.module('ExampleApp', [])
  .controller('ExampleController', function($scope) {
   
  })
  .directive('clickDirective', function() {
    var directive = {
      restrict: 'E',
      template: '<div>click me</div>',
      scope: {},
      controller: ["$scope", controllerFunc],
      controllerAs: 'multiCheckboxCtrl',
      bindToController: true,
      link: linkFunc,

    };

    return directive;


    function controllerFunc($scope) {

      // $watch List

      /**
       * Event handler for searchText change
       */
      $scope.$watch(function() {
        return $scope.multiCheckboxCtrl.clickedElsewhere.value;
      }, function(newVal) {
        if (newVal !== undefined && newVal !== "") {
          console.log(newVal);
          console.log("I am here");
        }
      });


    }

    function linkFunc(scope, element, attr) {

      // Detect Element Click Logic
      scope.multiCheckboxCtrl.clickedElsewhere = {
        value: false
      };

      angular.element(document).on('click', function() {
        scope.multiCheckboxCtrl.clickedElsewhere.value = false;
        console.log(scope.multiCheckboxCtrl.clickedElsewhere);
        scope.$apply();
      });

      element.on('click', function() {
        event.stopPropagation();
        scope.multiCheckboxCtrl.clickedElsewhere.value = true;
        console.log(scope.multiCheckboxCtrl.clickedElsewhere);
        scope.$apply();
      });
      // End Detect Element Click Logic

    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="ExampleController" id="ExampleController">
    <click-directive></click-directive>
    <div>
       click elsewhere
    </div>
  </div>
</div>

【讨论】：