角度模板不显示ng-hide

Question

我有一个角度指令,我用它来放置一个按钮形式.模板被隐藏,直到用户需要查看它.它是一个单独工作的简单模板,但是当我将它组合成更大的形式时,模板不会出现.

这是指令:

.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", "OR", "NOT"];
            scope.click = function() {
                scope.$apply ( function() {
                    scope.myBtnArr = (scope.myBtnArr < 2 ? scope.myBtnArr + 1 : 0);
                })
            }
        }

我收到此错误:

Error: [$rootScope:inprog] $apply already in progress

所以这显然是错误包装范围的问题,但不确定如何解决它.有什么想法吗？

Answer 1

看起来你不想为它创建双向绑定my-btn-arr.如果您只想将数据传递给指令而不是绑定到现有变量,请从属性参数中读取link.

.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", "OR", "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, 
link: function(scope, elem, 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.所以,如果你使用,scope: { myBtnArr: "=" }你必须使用带有可写表达式的指令,如下所示:

 <div button-toggle my-btn-arr="view.myValue"></div>
 <!-- "0" is not assignable-->
 <div button-toggle my-btn-arr="0"></div>

示例:http://jsfiddle.net/Lw7ckt9x/1/

Answer 2

而不是使用链接功能，请尝试在控制器功能下执行相同的操作。当您执行任何DOM操作时，需要使用链接功能，而您所需的控制器功能应该足够了。