angular directive, two-way data binding with boolean works only once

Question

trying to test a simple directive that will run if passed value is true but it works only once.

directive:

.directive('myDirective', function(){
        return {
            restrict: 'A',
            scope: {
               triggerObj: '@myDirective'
            },
            link: function (scope, elem, attrs) {
                scope.$watch('triggerObj', function() {
                    alert('success')
                });
            }
        };
    })

controller:

$scope.triggerObj = {};
$scope.triggerObj.trigger = false;

$scope.passValue = function(){
    //set to true
    $scope.triggerObj.trigger = true;
}

view:

<div my-directive='{[triggerObj.trigger]}'>
<button type='button' ng-click='passValue()'>click</button>

also tried to reset value to false before setting to true but still it works only once.

your triggerObj is not two way binding try instead of @triggerObj with =triggerObj — Yordan Nikolov
– Yordan Nikolov, Commented Jun 22, 2017 at 11:32
tried that in which case brackets needs to be removed from a view but the results remains the same — user1751287
– user1751287, Commented Jun 22, 2017 at 11:37

P.S. · Accepted Answer · 2017-06-22 11:25:10Z

1

It works only ones, because passValue() function set $scope.triggerObj.trigger to true. And your $watch is working only when old value is not equal to new value, but you first change $scope.triggerObj.trigger from false to true, and all other times nothings change (you just trying to change $scope.triggerObj.trigger from true to true again).

To do the trick, try to upgrade the $scope.passValue function to this:

$scope.passValue = function() {
  if($scope.triggerObj.trigger) {
    $scope.triggerObj.trigger = false;
  } else {
    $scope.triggerObj.trigger = true;
  }
}

edited Jun 22, 2017 at 11:25

answered Jun 22, 2017 at 11:21

P.S.

16.4k14 gold badges65 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user1751287 Over a year ago

I tried to put $scope.triggerObj.trigger = false; before $scope.triggerObj.trigger = true; in the function but it does not work

P.S. Over a year ago

@user1751287, because $scope.triggerObj.trigger = false works only ones, on controller load. Try to upgrade the $scope.passValue function as I wrote in my answer, this should help.

user1751287 Over a year ago

I put it within a function as well but still does not work...see edited answer

user1751287 Over a year ago

same result with your function as well

aseferov · Accepted Answer · 2017-06-22 11:37:35Z

1

It works when you change passValue function like
http://jsfiddle.net/yjjysdzw/

  $scope.passValue = function() {
    $scope.triggerObj.trigger = !$scope.triggerObj.trigger;
  }

answered Jun 22, 2017 at 11:37

aseferov

6,4133 gold badges20 silver badges24 bronze badges

1 Comment

user1751287 Over a year ago

this works but I need directive to run only on true so if I pass true after your command I get the same result so it does not work

edo.n · Accepted Answer · 2017-06-22 12:45:26Z

1

Two way data binding is achieved with '=', not '@'.

scope: {
  triggerObj: '=myDirective'
}

answered Jun 22, 2017 at 12:45

edo.n

2,4701 gold badge14 silver badges12 bronze badges

Collectives™ on Stack Overflow

angular directive, two-way data binding with boolean works only once

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related