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

我想为切换按钮创建指令，我想将代码放入指令：

<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更改？我应该只解析attr还是使用scope属性，或者是否有类似于with ngModel的代码需要与ngChange一起使用。

尝试以下方法：

控制器：

$scope.someFunction = function(){...};
$scope.someValue = false;

视图：

指令（在someValue始终为布尔真/假的情况下）：

app.directive（'toggle'，function（）{
返回{
限制：'E'，
替换：正确，
模板：“”
''+
“{{toggleValue&&Y\\\\\'N\'}”+
'',
范围：{
toggleValue:'=值'，
toggleChange:'=change'
},
链接：功能（范围）{
scope.change=函数（）{
scope.toggleValue=！scope.toggleValue；
scope.toggleChange（）；
}
}
};
})

通过尝试和错误，我找到了适用于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);
        };
    }
};

返回{
限制：'E'，
要求：'ngModel'，
作用域：{}，
模板：“”+
“是的”+
“不”+
'',
链接：功能（范围、元素、属性、模型）{
ngModel.$viewChangeListeners.push（函数（）{
范围$eval（属性变化）；
});
ngModel.$render=function（）{
scope.toggleValue=ngModel.$modelValue；
};
scope.toggle=函数（切换）{
scope.toggleValue=切换；
ngModel.$setViewValue（切换）；
};
}
};

---

由于未知原因

scope:true

不起作用（如果我使用$scope.toggle变量作为模型，它会尝试执行该布尔值而不是函数）

我想要一个模型。如果模型改变了，我想改变元素的工作状态，ngChange应该被触发。为什么？每次切换都会更改控制器中的someValue。如果更改控制器中someValue的值，按钮状态将更改。若要在指令更改之外触发函数，可以通过以下方式更改指令的链接函数：

link:function（scope）{scope.change=function（）{scope.toggleValue=！scope.toggleValue；}；scope.$watch（'toggleValue'，scope.toggleChange）；}

您的代码中有错误，且N在字符串之外。另外，我想有2个按钮，它们应该根据选择的按钮来改变类别。我想要ngModel，因为在角度上，它用于保存模型。我的变体更简单；）@gorpacrate是的，但它不适用于名称ngModel和ngChange，我想要这些名称。@gorpacrate您的变体可能“更简单”，但它肯定可以使用一些有关其工作原理的详细信息。

app.directive('toggle', function(){
    return{
        restrict: 'E',
        replace: true,
        template: ''+ 
            '<div class="toggle-button" ng-class="toggleValue">'+
                '<button ng-class="toggleValue" ng-click="change()">{{toggleValue&&\'Y\'||\'N\'}}</button>'+
            '</div>',
        scope: {
            toggleValue: '=value',
            toggleChange: '=change'
        },
        link: function(scope){
            scope.change = function(){
                scope.toggleValue = !scope.toggleValue;
                scope.toggleChange();
            }
        }
    };
})

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);
        };
    }
};