I am encountering an issue with my angular directive that is used to display a button form. The template remains hidden until it needs to be displayed for the user. Although the template works fine on its own, it does not appear when integrated into the larger form.
Below is the directive code:
.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);
}
}
};
});
The html snippet that functions correctly is as follows:
<div button-toggle my-btn-arr=0></div>
However, the following html snippet fails to work properly:
<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>
When this html snippet is executed within the larger partial controlled by an unrelated controller, an error occurs:
Error: [$compile:nonassign] Expression '0' used with directive 'buttonToggle' is non-assignable!
I attempted to resolve the issue by using scope.$apply, but encountered another error:
Error: [$rootScope:inprog] $apply already in progress
It seems like I need to correct how the scope is wrapped, but I'm unsure of the solution. Any suggestions?