Search code examples
angularjsangularjs-scopeangularjs-ng-repeatng-class

AngularJS: scope change in ngClick gets lost


I have ngClick and ngClass on an element duplicated by ngRepeat:

<li
    ng-class="{'active': $parent.mem.A == $key, 'not-active': $parent.mem.A && $parent.mem.A != $key}"
    ng-repeat="($key, A) in As"
    ng-click="$parent.mem.A = $key">

Inside the li I have a button that changes the value of $parent.mem.A onClick:

<button ng-click="$parent.mem.A = $parent.findInHash('prev','A')">Activate previous</button>

findInHash() returns the expected value, and when I step through angular, the value in $scope.$apply() from ngEventDirective is correct; but somewhere it's getting lost.

fiddle


Solution

  • in your code all ng-click are executed when you click on the button

    you just need to stop the event propagation like the following sample

    $scope.findInHash = function ($event, dir, attr) {
        $event.stopPropagation();
        $event.preventDefault();
        ...
    
    
    <button ng-click="$parent.mem.A = $parent.findInHash($event,'prev','A')">...