javascript add event listener not working with angularjs $scope

Question

this is my html file:

<section data-ng-controller="myCtrl">
    {{name}}
    <button id="btn1">Button1</button>
</section>

this is my controller:

angular.module('users').controller('myCtrl', ['$scope',
    function($scope) {

        $scope.name="HELLO";

        document.getElementById("btn1").addEventListener("click",function(){
            $scope.name="changed";
        });
}]);

the html file displays HELLO but it does not changes to "changed" on clicking the button. i am new to angular can someone please help me..

tymeJV · Accepted Answer · 2015-09-16 19:36:35Z

4

It's because regular event listeners don't trigger a $digest cycle within Angular, which is what will update the view. You should be using ngClick and defining a $scope function:

$scope.clickHandler = function() { $scope.name = "changed"; };

And the HTML:

<button ng-click="clickHandler()">Button1</button>

answered Sep 16, 2015 at 19:36

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

1 Comment

leroydev Over a year ago

Addition: another way of solving this (because you will encounter third party code / libraries with which this solution cannot be applied) is by calling $scope.$apply(); after a variable in the $scope was updated.

Collectives™ on Stack Overflow

javascript add event listener not working with angularjs $scope

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related