Javascript 将布尔值传递给指令
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25799363/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Passing Boolean Value Into Directive
提问by timmy
I am trying to toggle the visibility of an element rendered by a directive using <div ngHide="readOnly">. The value or readOnlyis passed in via a directive.
我正在尝试使用<div ngHide="readOnly">. 值 orreadOnly是通过指令传入的。
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) {};
}
}
};
}]);
This seems to work in the following cases:
这似乎适用于以下情况：
<!-- 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}}"/>
However, if I invert the boolean expression <div ngHide="!readOnly">The following usage of the directive does not hide the dive as expected:
但是，如果我反转布尔表达式<div ngHide="!readOnly">该指令的以下用法不会按预期隐藏潜水：
<!-- element is rendered when it should be hidden -->
<div single-view-card read-only="{{false}}"/>
What am I doing wrong?
我究竟做错了什么？
回答by bto.rdz
what you are doing wrong is
你做错了什么
readOnly:'@'
this means readOnly will be a string, to make it a js variable try
这意味着 readOnly 将是一个字符串，使其成为一个 js 变量 try
readOnly:'='
then
然后
<div single-view-card read-only="{{false}}"/>
should be
应该
<div single-view-card read-only="true"/>
you need to show more code, this can be part of the error but I think there is more
您需要显示更多代码，这可能是错误的一部分，但我认为还有更多
hope it helps
希望能帮助到你
回答by axelduch
Currently it does not work because as bto.rdzmentionned in his answer, @will read the raw value of the attribute, this is why you needed to interpolate your boolean value.
In the following example, you can switch the value of readOnlyat the directive's scope level through a controller holding the model ctrlReadOnly.
目前它不起作用，因为正如bto.rdz在他的回答中提到的那样，@将读取属性的原始值，这就是您需要插入布尔值的原因。在以下示例中，您可以readOnly通过包含模型的控制器在指令的范围级别切换值ctrlReadOnly。
What I suggest instead is to use a scope variable to make it dynamic with =.
相反，我建议使用范围变量使其与=.
How to use your directive
如何使用您的指令
<div single-view-card read-only="ctrlReadOnly"></div>
The directive looks like this
该指令看起来像这样
angular.module('CrossReference', [])
.directive('singleViewCard', [function () {
return {
restrict: 'A',
template: '<div ng-hide="readOnly">Hidden when readOnly is true</div>',
replace: true,
scope: {
readOnly: '='
}
};
}])
Here is a fake controller to prepare the data for the view
这是一个为视图准备数据的假控制器
.controller('myCtrl', function ($scope) {
$scope.ctrlReadOnly = false;
});
I made a js fiddle here
我在这里做了一个 js 小提琴
回答by Steve Lang
Your directive is fine (except that there shouldn't be a semicolon after post:function(scope, tElement, tAttrs) {}).
您的指令很好（除了 之后不应该有分号post:function(scope, tElement, tAttrs) {}）。
Directive usage:
指令用法：
<div single-view-card read-only="true"></div>
In SingleViewCard.html:
在 SingleViewCard.html 中：
<div ng-hide="!{{readOnly}}">Lorem ipsum</div>
Note that the exclamation mark comes before the curly braces.
请注意，感叹号出现在花括号之前。
Explanation
解释
scope: {
readOnly:'@'
},
means that readOnlybecomes a variable that holds a string value specified by the read-onlyattribute. We can then use our readOnlyvariable in the template by surrounding it with double curly braces.
意味着readOnly成为一个变量，保存由read-only属性指定的字符串值。然后我们可以readOnly在模板中使用我们的变量，用双花括号括起来。
I have also made a jsFiddle for it here.
我还在这里为它制作了一个 jsFiddle 。
回答by John Lee
In the (post 1.5) component world, this can be achieved using '<' to pass the boolean along as a one-time binding.
在（1.5 后）组件世界中，这可以使用“<”将布尔值作为一次性绑定传递来实现。
Inputs should be using < and @ bindings. The < symbol denotes one-way bindings which are available since 1.5. The difference to = is that the bound properties in the component scope are not watched, which means if you assign a new value to the property in the component scope, it will not update the parent scope.
输入应该使用 < 和 @ 绑定。< 符号表示从 1.5 开始可用的单向绑定。与= 的不同之处在于，不会监视组件范围内的绑定属性，这意味着如果您为组件范围内的属性分配新值，则不会更新父范围。
