Directive鏈接中的作用域變量未更新為Directive Controller使用Angular讀取它時

Question

這是我的代碼

    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基本上確定指令元素是否被單擊。

我驗證了每當單擊指令元素時，它都為true；當單擊指令元素之外的任何元素時，它為false。

但是，似乎我在控制器中的$watch無法捕獲更改。

誰能告訴我怎么了

謝謝

Answer 1

Angular不知道事件偵聽器中有一個更改對象屬性。

如文檔所述 ：

$apply()用於從角度框架外部以角度執行表達式。 （例如，來自瀏覽器DOM events ， setTimeout ， XHR或第三方庫）。 因為我們正在調用角度框架，所以我們需要執行異常處理的適當范圍生命周期，並執行監視。

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>