javascript - 如何在自定义指令中使用 ngChange

Question

我想为切换按钮创建指令，我有代码要放入指令中:

<div class="toggle-button" ng-class="{true: toggleTrue === true, false: toggleTrue === false}">
    <button class="true" ng-click="toggleTrue = true">Y</button><button class="false" ng-click="toggleTrue = false">N</button>
</div>

(我只处理风格变化，这就是为什么我只有类变化)

我想要这样的东西:

<toogle ng-change="SomeFunction()" ng-model="someValue" />

如何在指令中使用 ng-change？我应该只解析 attr 还是使用 scope 属性，或者是否有类似 ngModel 的代码需要与 ngChange 一起使用。

Answer 1

通过反复尝试，我找到了适用于 ngModel 和 ngChange 的代码:

return {
    restrict: 'E',
    require: 'ngModel',
    scope: {},
    template: '<div class="toggle-button" ng-class="{true: toggleValue === true, false: toggleValue === false}">'+
        '<button class="true" ng-click="toggle(true)">Y</button>'+
        '<button class="false" ng-click="toggle(false)">N</button>'+
        '</div>',
    link: function(scope, element, attrs, ngModel) {
        ngModel.$viewChangeListeners.push(function() {
            scope.$eval(attrs.ngChange);
        });
        ngModel.$render = function() {
            scope.toggleValue = ngModel.$modelValue;
        };
        scope.toggle = function(toggle) {
            scope.toggleValue = toggle;
            ngModel.$setViewValue(toggle);
        };
    }
};

由于未知原因 scope: true 不起作用(如果我将 $scope.toggle 变量用作模型，它会尝试执行该 bool 值而不是函数)