在自定义replace指令上使用ng-show不会显示或隐藏 [英] Use ng-show on a custom replace directive does not show or hide
问题描述
我在让ng-show(或ng-hide)执行自定义指令时遇到问题.在普通的HTML元素上也可以正常工作.
I am having an issue with getting ng-show (or ng-hide) to work on a custom directive. It is working just fine on normal HTML elements.
我组成了一个非常简单的示例来说明问题:
I made up a very simple example that shows the issue:
<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/
The end result is that the html button 'Second' is hidden, but 'mybutton' is not. http://jsfiddle.net/fotoguy42/4j7td/2/
如何使ng-hide/show在我的小部件上起作用?
How can I make the ng-hide/show work on my widget?
推荐答案
Ok so this is actually mostly a duplicate of Why ng-hide doesn't work with custom directives?
因为要在指令中创建新作用域,所以必须将变量noSecond传递给指令并将其包括在新作用域中.
Because you're creating a new scope in your directive you have to pass the variable noSecond to the directive and include it in the new scope.
也-您应该为自己的JavaScript真正使用camelCase:
Also - you should really use camelCase for your javascript:
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中已进行了更改.
It does appear that this has changed in angular 1.2.1 although I can't seem to find the change in the migration guide that would be responsible for this....
https://docs.angularjs.org/guide/migration
这篇关于在自定义replace指令上使用ng-show不会显示或隐藏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!