如何在Angular指令中绑定布尔值？
如何在Angular指令中绑定布尔值？
我想将一些布尔属性绑定/设置到指令中。但我真的不知道怎么做，也不知道如何实现以下行为。
假设我想为一个结构设置一个标志，比如说一个列表是否可以收缩。我有以下的HTML代码：
items 是双向绑定的，name 只是一个属性
我希望在列表的$scope中通过传递一个值（true、false或其他值）或者双向绑定的方式来使用 collapsable 属性
我正在开发一些UI组件，我希望提供多种与它们交互的方式。也许，随着时间的推移，一些人会想通过将对象的属性传递给属性来了解该组件的状态，无论是折叠还是展开。
有办法实现这个吗？如果我对某些事情理解错误或者错了，请纠正我。
谢谢
问题出现的原因是在Angular指令中绑定布尔值时，需要配置自定义的单向数据绑定行为。原始代码中使用了$observe方法来监听属性的变化，从而更新指令中的scope.collapsable变量的值。这种方式只会受到属性变化的影响，而不会受到直接修改$scope.collapsable的影响。
解决方法是使用$observe方法来监听属性的变化，并使用scope.$eval()方法来将属性的值转换为布尔值，并赋值给scope.collapsable变量。这样就实现了指令中布尔值的单向数据绑定。
在原始代码中，使用了$scope/$element/$attrs这些名称，但实际上，link函数的参数并不是通过依赖注入传递的，而是通过位置参数传递的。因此，scope, element, attrs这些参数更加合适。
关于scope.$eval()和javascript原生的eval()函数之间是否有区别，可以参考Stack Overflow上的一个问题：stackoverflow.com/questions/15671471/...
在Angular指令中绑定布尔值的方法
问题出现的原因：
- 在上述代码中，通过双向绑定（bi-directional binding）实现了将父作用域（controller）中的值传递给子作用域（directive）。然而，当尝试使用布尔值作为参数传递给子作用域时，出现了问题。
解决方法：
- 在指令中创建一个作用域（scope），并设置双向绑定。
- 在指令的模板中使用这些绑定的值。
代码如下：
app.controller('ctrl', function($scope)
{
$scope.list = {
name: 'Test',
collapsed: true,
items: [1, 2, 3]
};
});
app.directive('list', function()
{
return {
restrict: 'E',
scope: {
collapsed: '=',
name: '=',
items: '='
},
template:
'<div>' +
'{{name}} collapsed: {{collapsed}}' +
'<div ng-show="!collapsed">' +
'<div ng-repeat="item in items">Item {{item}}</div>' +
'</div>' +
'<br><input type="button" ng-click="collapsed = !collapsed" value="Inside Toggle">' +
'</div>'
};
});
然后将选项作为属性传递给指令：
<list items="list.items" name="list.name" collapsed="list.collapsed"></list>
通过这种方式，可以成功将布尔值传递给指令，并在指令模板中使用。
