Question

我有下面提到的用于检测元素点击事件的自定义指令。

指令

.directive('myDir', [
        '$document', function ($document) { 

            return {
                restrict: 'A',
                scope: true,
                link: function (scope, element, attrs) {
                    scope.IsWizardOpen = false;

                    element.on('click', function (e) {
                        scope.$apply(function () {
                            scope.IsWizardOpen = true;
                        });
                        e.stopPropagation(); //stop event from bubbling up to document object
                    });

                }
            };
        }]);

我试图观察控制器内IsWizardOpen属性的变化，如下所示。但它不起作用？单击元素（即IsWizardOpen）后，true的值已更改。那么您能告诉我问题在哪里吗？提前致谢。

控制器

$scope.$watch('IsWizardOpen', function () {
            if ($scope.IsWizardOpen) {
                //my task
            }
        });

HTML

<div my-dir>
</div>

Answer 1

因此，原始值在被分配时绑定到子范围，因此您需要有一个包装它的对象。要深入挖掘，请阅读this。

我做了一些小改动，基本上我在控制器中创建了一个包装器对象，然后你的指令更新了它：

<强>控制器：

function MyCtrl($scope) {
    $scope.wrapper = {};

    $scope.$watch(function () {
        return $scope.wrapper.IsWizardOpen;
    }, function (newVal, oldVal) {
            if (newVal) {
                alert('watch works');
            }
        });
}

<强>指令：

myApp.directive('myDir', [
        '$document', function ($document) { 

            return {
                restrict: 'A',
                scope: true,
                template: '<div>Click Me!</div>',
                link: function (scope, element, attrs) {

                    scope.wrapper.IsWizardOpen = false;

                    element.on('click', function (e) {

                        scope.wrapper.IsWizardOpen = true;
                        scope.$apply();
                        e.stopPropagation(); //stop event from bubbling up to document object
                    });

                }
            };
        }]);

Fiddle

检测控制器

1 个答案: