我在让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在我的小部件上起作用?
好的,所以这实际上是ng-hide不适用于自定义指令的重复项?
因为要在指令中创建新作用域,所以必须将变量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>
似乎确实在角度1.2.1中进行了更改,尽管我似乎无法在迁移指南中找到可能导致此问题的更改...。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句