CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrap
acostela
acostela

Reputation: 2727

two way binding attribute directive

I need two way data binding in an attribute for the progressBar directive provided by bootstrap.

Inside the progressBar component we have the following 

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

When I use this in my html I have this.

<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">

What I want is that animate value attribute with two way databinding.

animate="myCtrl.isRunning"

The problem is that I can't use 

animate={{myCtrl.isRunning}}

because I get the error

Error: $parse:syntax Syntax Error Syntax Error: Token '{' invalid key at column 2 of the expression [{{field}}.$error] starting at [{field}}.$error].

Is there anyway to bind this attribute "animate" to a model?

Upvotes: 1

Views: 358

Answers (1)

plong0
plong0

Reputation: 2188

It looks like the animate attribute is read only once when the directive controller is initialized. It is neither $watched nor $observed

From ui-bootstrap.js::UibProgressController

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

You may need to fork the module and add an $attrs.$observe('animate', setAnimate) in the UibProgressController

Upvotes: 1

Related Questions