角度模板不显示ng隐藏

Angular Template Not Showing with ng-hide

本文关键字：显示 ng 隐藏      更新时间：2023-09-26

我有一个角度指令，用于放置按钮表单。该模板被隐藏，直到用户需要看到它。它是一个简单的模板，可以单独工作，但当我将其组合到较大的表单中时，模板不会出现。

这是指令：

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

因此，只需将该模板函数封装在scope中即可$申请权？没有。当我这样做的时候。。。

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

所以这显然是一个错误包装作用域的问题，但不确定如何修复它。有什么想法吗？

看起来您不想为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/

与其使用链接函数，不如尝试在控制器函数下执行相同的操作。当您进行任何DOM操作时，都需要链接函数。您需要的功能控制器应该足够了。

看看ngdoc上的这个错误。

你使用这个：

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

但CCD_ 6是不可分配的。意味着您不能进行0 = 1;

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

<div button-toggle my-btn-arr="obj.myvar"></div>
相关文章：