双向绑定属性指令答案

【问题标题】：two way binding attribute directive双向绑定属性指令
【发布时间】：2016-08-10 13:36:29
【问题描述】：

我需要在 bootstrap 提供的 progressBar 指令的属性中进行双向数据绑定。

在progressBar 组件中，我们有以下内容

.constant('uibProgressConfig', {
  animate: true,
  max: 100
})

当我在我的 html 中使用它时，我有这个。

<uib-progress ng-repeat="bar in myCtrl.stacked track by $index" animate="myCtrl.isRunning" value="{{bar.value}}" type="{{bar.type}}"
      style="width:{{myCtrl.percentage}}%; border-right: 1px solid #000; border-radius: 0px">

我想要的是具有两种数据绑定的动画值属性。

animate="myCtrl.isRunning"

问题是我不能用

animate={{myCtrl.isRunning}}

因为我得到了错误

错误：$parse:syntax Syntax Error 语法错误：在表达式 [{{field}}.$error] 从 [{field}}.$error] 开始的第 2 列中的标记“{”无效键。

是否可以将此属性“动画”绑定到模型？

【问题讨论】：

做双向数据绑定，需要用到ng-model，可以提供你的JS代码吗？
我不能将 ng-model 用于 HTML 中的 animate 属性

标签： javascript angularjs twitter-bootstrap

【解决方案1】：

在初始化指令控制器时，动画属性似乎只读取一次。既不是$watched也不是$observed

来自 ui-bootstrap.js::UibProgressController

animate = angular.isDefined($attrs.animate) ? $scope.$parent.$eval($attrs.animate) : progressConfig.animate;

您可能需要 fork 模块并在 UibProgressController 中添加 $attrs.$observe('animate', setAnimate)

【讨论】：

是的，我昨天看到了。最后是我完成的工作。修改核心代码以将观察者添加到定义为常量的属性中。我标记为已解决，因为基本上这是我为解决问题所做的。