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>

编辑：

这个版本＆＃34;现在正在工作＆＃34;，但是当我第二次点击我的开关/复选框时，element.on会触发两次，这会将我的范围值翻转回原来的状态...... ..基本上，它不让我＆＃34;取消检查＆＃34;我的切换。

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的答案也被使用了（将一个对象作为属性传递而不是一个真/假）

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;

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

Answer 2

您需要在更改范围后运行摘要周期，因为更改范围内的事件绑定不会运行角度摘要周期，您需要通过执行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();
                });
            });
        }
    };
}]);

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

3 个答案: