AngularJS：从自定义指令更改父范围值

Question

由于某种原因，我无法根据我在SO上看到的其他示例来进行这项工作。

这是我的指令：

(function () {

    angular.module('materialDesign')
        .directive('aSwitch', directive);

    function directive() {

        return {
            templateUrl: 'elements/material/switch/switch.html',
            transclude: false, // I've tried true here
            restrict: 'E',
            scope: {
                enabled: '=',
                toggleState: '=',
            },
            link: function(scope, element) {
                element.on('click touchstart', function() {
                    scope.toggleState = !scope.toggleState;
                });
            }
        };
    }
})();

以及在切换开关/复选框时要更改的控制器作用域值：

$scope.hideInactive = true;

的HTML：

<a-switch toggle-state="hideInactive"></a-switch>

然后在我的html页面中，我有这个：

<div ng-show="!hideInactive">
    <!-- stuff -->
</div>

编辑：

这个版本“现在可以正常工作”，但是当我再次单击开关/复选框时，element.on会触发两次，这会将我的范围值恢复到原来的状态.....基本上，这不是让我“取消选中”我的切换。

angular.module('material')
    .directive('aSwitch', [
        '$timeout', function($timeout) {
            return {
                templateUrl: 'elements/material/switch/switch.html',
                transclude: false,
                restrict: 'E',
                scope: {
                    enabled: '=',
                    toggleState: '=',
                },
                link: function (scope, element) {
                    element.on('click touchstart', function () {
                        $timeout(function () {
                            scope.toggleState.state = !scope.toggleState.state;
                            scope.$apply();
                        });
                    });

                }
            };
        }
    ]);

编辑和最终解决方案：

这是修复所有问题的更新的指令链接属性。 我想补充一点，也使用了Oleg Yudovich的答案（将对象作为属性而不是true / false传递）

link: function (scope, element) {
                element.on('click touchstart', function (event) {
                    if (event.srcElement && event.srcElement.id && event.srcElement.id === "switch") {
                        event.stopPropagation();

                        $timeout(function() {
                            scope.toggleState.state = !scope.toggleState.state;
                        });
                    }
                });
            }

Answer 1

尝试传递对象而不是像这样的原始变量：

$scope.hideInactive = {
   state: false;
}

无需更改的html：

<a-switch toggle-state="hideInactive"></a-switch>

在您的指令中：

scope.toggleState.state = !scope.toggleState.state;

励志这篇很棒的文章： https : //github.com/angular/angular.js/wiki/Understanding-Scopes

Answer 2

您需要在作用域更改后运行摘要循环，因为从事件更改作用域绑定将不会运行角度摘要循环，因此您需要通过执行scope.$apply()来手动运行摘要循环scope.$apply()

指示

(function () {

    angular.module('materialDesign')
        .directive('aSwitch', directive);

    function directive($timeout) {

        return {
            templateUrl: 'elements/material/switch/switch.html',
            transclude: false, // I've tried true here
            restrict: 'E',
            scope: {
                enabled: '=',
                toggleState: '=',
            },
            link: function(scope, element) {
                element.on('click touchstart', function() {
                  $timeout(function(){
                    scope.toggleState = !scope.toggleState;
                  });
                });
            }
        };
    }
})();

Answer 3

试试下面的代码：

angular.module('material').directive('aSwitch', ['$timeout', function($timeout) {
    return {
        templateUrl: 'elements/material/switch/switch.html',
        transclude: false,
        restrict: 'E',
        scope: {
            enabled: '=',
            toggleState: '=',
        },
        link: function(scope, element) {
            element.on('click touchstart', function() {
                $timeout(function() {
                    scope.toggleState.state = !scope.toggleState.state;
                    scope.$apply();
                });
            });
        }
    };
}]);