1

我在让 ng-show（或 ng-hide）处理自定义指令时遇到问题。它在普通的 HTML 元素上工作得很好。

我做了一个非常简单的例子来说明这个问题：

<div ng-app="appMod">
  <div ng-controller="Ctrl3">
      <button>First</button>
      <button ng-hide="NoSecond">Second</button>

      <mybutton ng-hide="NoSecond" label="My button"/>
  </div>
</div>

和JS：

function Ctrl3($scope) {
    $scope.NoSecond = true;
};

var appmod = angular.module('appMod', []);

appmod.directive("mybutton", function() {
    return {
        restrict: "E",
        template: "<div style='border: 1px solid black;'><button>{{label}}</button></div>",
        scope: {label:'@'}
    };
});

最终结果是 html 按钮 'Second' 被隐藏，但 'mybutton' 没有。 http://jsfiddle.net/fotoguy42/4j7td/2/

如何使 ng-hide/show 在我的小部件上工作？

4

1 回答 1

4

好的，这实际上主要是Why ng-hide doesn't work with custom directives的副本？

因为您在指令中创建了一个新范围，所以您必须将变量 noSecond 传递给指令并将其包含在新范围中。

另外 - 你真的应该为你的 javascript 使用 camelCase：

JS：

function Ctrl3($scope) {
  $scope.noSecond = true;
};

var appmod = angular.module('appMod', []);

appmod.directive("mybutton", function() {
    return {
        restrict: "E",
        template: "<div style='border: 1px solid black;'><button>{{label}}</button></div>",
        scope: {label:'@', noSecond: '='}
    };
});

HTML：

<div ng-app="appMod">
  <div ng-controller="Ctrl3">
      <button>First</button>
      <button ng-hide="noSecond">Second</button>

      <mybutton ng-hide="noSecond" label="My button" no-second="noSecond"/>
  </div>
</div>

看起来这在 angular 1.2.1 中已经发生了变化，尽管我似乎无法在迁移指南中找到导致这一点的变化......

https://docs.angularjs.org/guide/migration

于 2014-04-30T19:17:17.737 回答