Question

我正在尝试在Angular中编写一个简单的自定义指令，将标签转换为切换按钮（类似于复选框）。到目前为止我编写的代码更新了内部变量（隔离范围），但双向绑定似乎不起作用。当我单击按钮时，按钮切换（css类出现并消失），但myVariable未更新。

非常感谢任何帮助！

用法

<button toggle-button="myVariable">My Button</button>

指令代码

( function() {

var directive = function () {

    return {

        restrict: 'A',

        scope: {
            toggleButton: '=checked'
        },

        link: function( $scope, element, attrs ) {

            $scope.$watch('checked', function(newVal, oldVal) {
                newVal ? element.addClass ('on') : element.removeClass('on');
            });

            element.bind('click', function() {
                $scope.checked = !$scope.checked;
                $scope.$apply();
            });
        }
    };
};


angular.module('myApp')
    .directive('toggleButton', directive );

}());

Answer 1

您的指令范围正在寻找不存在的属性。

尝试更改：

 scope: {
     toggleButton: '=checked'
  },

要

scope: {
    toggleButton: '='
},

区别在于=checked会查找属性checked，而=将使用与范围对象中的属性名称相同的属性

还需要更改$watch但你可以摆脱它并使用ng-class

Answer 2

只需替换

scope: {
            toggleButton: '=checked'
        }

到

 scope: {
            checked: '=toggleButton'
        }

Answer 3

正如charlietfl所说，你不需要那个已检查的变量。您正在对其进行更改而不是外部变量。

这是一个固定版本：

angular.module('components', [])
    .directive('toggleButton', function () {
        return {
            restrict: 'A',
            scope:{
                toggleButton:'='
            },
            link: function($scope, $element, $attrs) {    
                $scope.$watch('toggleButton', function(newVal) {
                    newVal ? $element.addClass ('on') : $element.removeClass('on');
                });
                $element.bind('click', function() {
                    $scope.toggleButton = !$scope.toggleButton;
                    $scope.$apply();
                });
            }

        }
    })

angular.module('HelloApp', ['components'])

http://jsfiddle.net/b3b3qkug/1/

自定义指令 - 双向绑定无法正常工作

3 个答案: