我正在尝试使用<div ngHide="readOnly">
切换一个元素的可见性,这个元素是通过一个指令传入的。
angular.module('CrossReference')
.directive('singleViewCard', [function() {
return {
restrict:'AE',
templateUrl: '/CrossReference-portlet/js/templates/SingleViewCard.html',
replace:true,
scope: {
readOnly:'@'
},
link: {
pre:function(scope, tElement, tAttrs) {},
post:function(scope, tElement, tAttrs) {};
}
}
};
}]);
这似乎适用于以下情况:
<!-- element rendered in single-view-card is hidden -->
<div single-view-card read-only="{{true}}"/>
<!-- element rendered in single-view-card is shown -->
<div single-view-card read-only="{{false}}"/>
然而,如果我反转布尔表达式<div ngHide="!readOnly">
,下面的指令用法并没有像预期的那样隐藏潜水:
<!-- element is rendered when it should be hidden -->
<div single-view-card read-only="{{false}}"/>
我哪里做错了?
4条答案
按热度按时间3duebb1j1#
你做错的是
这意味着readOnly将是一个字符串,要使其成为js变量,请尝试
那么
应该是
您需要显示更多代码,这可能是错误的一部分,但我认为还有更多
9w11ddsr2#
目前它不工作,因为正如bto.rdz在他的答案中提到的,
@
将读取属性的原始值,这就是为什么你需要插入你的布尔值。在下面的例子中,你可以通过一个控制器持有模型ctrlReadOnly
在指令的作用域级别切换readOnly
的值。我的建议是使用一个作用域变量,使其成为
=
的动态变量。如何使用指令
指令如下所示
下面是一个伪控制器,用于为视图准备数据
我做了一把小提琴
guykilcj3#
您的指令很好(除了
post:function(scope, tElement, tAttrs) {}
后面不应该有分号)。指令用法:
在单视图卡. html中:
请注意,感叹号位于大括号之前。
意味着
readOnly
变成了一个变量,该变量包含由read-only
属性指定的字符串值,然后我们可以在模板中使用readOnly
变量,方法是用双花括号将其括起来。我还为它做了一个jsfiddle here。
cpjpxq1n4#
在(1.5之后)组件世界中,这可以通过使用“〈"将布尔沿着作为一次性绑定传递来实现。
Angular Components Reference
输入应该使用〈和 @Binding 。〈符号表示单向绑定,自1.5起可用。与=的区别在于组件作用域中的绑定属性不受监视,这意味着如果您为组件作用域中的属性分配新值,它不会更新父作用域。