ng-hide 不显示角度模板答案

【问题标题】：Angular Template Not Showing with ng-hideng-hide 不显示角度模板
【发布时间】：2016-01-09 20:50:51
【问题描述】：

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

指令如下：

.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 sn-p：

<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!

所以只需将该模板函数包装在 scope.$apply 中，对吗？没有。当我这样做时......

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

因此，错误地包装范围显然是一个问题，但不确定如何修复它。有什么想法吗？

【问题讨论】：

标签： javascript angularjs templates

【解决方案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/

【讨论】：

这是我对可能出错的地方的猜测......让我试试这个并回复你。
成功了！你说得对，我只需要单向绑定。谢谢！

【解决方案2】：

不要使用链接功能，而是尝试在控制器功能下做同样的事情。当您对所需控制器的功能进行任何 DOM 操作时，需要链接功能。

【讨论】：

我明白了，我很确定我在做 DOM 操作。当用户单击该按钮时，它会在三种不同的状态之间移动。我还需要从该模板添加的按钮数量灵活，以便用户可以根据需要添加任意数量的按钮。
在您的点击函数中，您只是为 myBtnArr 设置了一些状态，DOM 由 Angular 更改。如果您正在执行一些传统的 DOM 操作，例如查找控件并设置其文本内容，则应该在 Link 函数中完成。由于 Angular 支持的两种数据绑定方式，此处的按钮文本发生了更改。

【解决方案3】：

查看ngdocs上的这个错误。

你用这个：

<div button-toggle my-btn-arr=0></div>

但0 不可分配。这意味着你不能这样做0 = 1;

您必须传递一个值为0 的变量，而不是普通的0 像这样：

<div button-toggle my-btn-arr="obj.myvar"></div>

【讨论】：