我有一个角度指令,我用来放置一个按钮形式.模板被隐藏,直到用户需要看到它.它是一个简单的模板,它自己可以工作,但是当我将它组合成较大的模板时,模板不会出现.
这是指令：
.directive('buttonToggle',function() {
return {
restrict: 'A',scope: {
myBtnArr: "="
},template: '<button ng-click="click()">{{ myBtnTxt[myBtnArr] }}</button>',link: function(scope) {
scope.myBtnTxt = ["AND","OR","NOT"];
scope.click = function() {
scope.myBtnArr = (scope.myBtnArr < 2 ? scope.myBtnArr + 1 : 0);
}
}
};
});
那么html的工作原理：
<div button-toggle my-btn-arr=0></div>
而HTML代码段不起作用：
<tr ng-show="rowsShown >= 2"><td>Search by:</td><td><div button-toggle my-btn-arr=0></div><select ng-model="selection2" ng-options="option.text for option in options"></select><input type="text" size="20" ng-model="queryF2"><ng-md-icon icon="add_circle_outline" style="fill:#a9a9a9" ng-click="addSearchField();"></ng-md-icon> <ng-md-icon icon="remove_circle_outline" style="fill:#a9a9a9" ng-click="removeSearchField();"></ng-md-icon></td></tr>
当我在较大的部分(由与模板无关的控制器控制)运行这个html时,我得到这个错误：
Error: [$compile:nonassign] Expression '0' used with directive 'buttonToggle' is non-assignable!
所以只需要在范围内包装该模板函数$apply right？不.当我这样做
link: function(scope) {
scope.myBtnTxt = ["AND","NOT"];
scope.click = function() {
scope.$apply ( function() {
scope.myBtnArr = (scope.myBtnArr < 2 ? scope.myBtnArr + 1 : 0);
})
}
}
我得到这个错误：
Error: [$rootScope:inprog] $apply already in progress
所以这显然是一个问题,不正确的包围范围,但不知道如何解决它.有什么想法吗？
解决方法
看来你不想为my-btn-arr创建一个双向绑定.如果只想将数据传递给指令而不是绑定到现有变量,请从链接的属性参数中读取.
.directive('buttonToggle',function() {
return {
restrict: 'A',scope: {},template: '<button ng-click="click()">{{ myBtnTxt[myBtnArr] }</button>',link: function(scope,elem,attr) {
scope.myBtnArr = attr.myBtnArr;
scope.myBtnTxt = ["AND","NOT"];
scope.click = function() {
scope.myBtnArr = (scope.myBtnArr < 2 ? scope.myBtnArr + 1 : 0);
}
}
}
});
如果您还希望通过使用$parse作为输入传递变量的可能性.
// This won't work with an isolated scope,inherit from parent scope instead
scope : true,attr) {
// this will evaluate the expression against the scope
scope.myBtnArr = $parse(attr.myBtnArr)(scope);
}
现在可以使用该指令
<div button-toggle my-btn-arr="0"></div> <div button-toggle my-btn-arr="view.myValue"></div>
如果您真的想使用双向绑定,则必须将值写回到使用表达式my-btn-arr定义的路径中.所以,如果你使用范围：{myBtnArr：“=”}你必须使用这样的可写表达式的指令：
<div button-toggle my-btn-arr="view.myValue"></div> <!-- "0" is not assignable--> <div button-toggle my-btn-arr="0"></div>
