changing $scope Angular variable through a seperate JavaScript event listener

Question

I have an angular HTML file, an angularjs controller file and a simple JavaScript file.

Angular HTML file is something like

<section data-ng-controller="myCtrl">

    {{name}}

    <button id="btn1">Button1</button>

</section>

Angularjs controller file is like

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

    $scope.name="HELLO";

}]);

and a simple JavaScript file like

<script>
document.getElementById("btn1").addEventListener("click",function(){

    // code????? that can change the $scope.name variable to "changed"

});
</script>

the html file will initially look like

HELLO
<button>

I want the functionality that on clicking the button it should change to something like

changed
<button>

Is there any way to change the $scope variable in angular part from a separate JavaScript file containing a regular event listener?

How to code the JavaScript part for this?

Why would you need to do this? the click event can be done in angular too. — Diana R
– Diana R, Commented Sep 19, 2015 at 18:55
i have 100 lines of same code in 4 different angular controllers so i was thinking to put that in a separate file.. — Gaurav Gupta
– Gaurav Gupta, Commented Sep 19, 2015 at 19:16
what does separate file have to do with anything...just making more work for yourself. Could put all the functions in a service also which would make binding to controllers very simple — charlietfl
– charlietfl, Commented Sep 19, 2015 at 19:32
Indeed, there can be a service or a directive that would remove duplications, but messing javascript with angular soon will get messy and unmanageable. — Diana R
– Diana R, Commented Sep 19, 2015 at 19:47
Ok i am a newbie and just thought of this way to reduce duplications. i will try the service way to do this — Gaurav Gupta
– Gaurav Gupta, Commented Sep 19, 2015 at 19:53

Drew Gaynor · Accepted Answer · 2015-09-19 18:55:12Z

3

You can access an Angular scope through an element directly.

//Angular code
var myApp = angular.module('users', []);

myApp.controller('myCtrl', ['$scope',
function($scope) {
    $scope.name="HELLO";
}]);

//External code
document.getElementById("btn1").addEventListener("click", function (e) {
  var $scope = angular.element(e.target).scope();
  
  $scope.$apply(function () {
    $scope.name = 'Changed';
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

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

answered Sep 19, 2015 at 18:55

Drew Gaynor

8,4825 gold badges42 silver badges53 bronze badges

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

Comments

Vamsi · Accepted Answer · 2015-09-19 19:07:05Z

0

You can use the inbuilt angular function ng-click to achieve the same,

Your HTMl will be:

<div ng-app ng-controller="MyCtrl">
  <div> {{ name}}</div>

  <input type="submit" ng-click="btn()" value="button"></input>

</div>

Your angular js code will be:

var myApp = angular.module('users', []);

myApp.controller('myCtrl', ['$scope', function($scope) {
   $scope.name="HELLO";

   $scope.btn = function () {
     $scope.name = "Changed";
   };
}]);

You can find the working jsfiddle here

answered Sep 19, 2015 at 19:07

Vamsi

6844 silver badges16 bronze badges

2 Comments

Gaurav Gupta Over a year ago

i want to achieve this functionality by using a seperate javascript file for the event listener

Vamsi Over a year ago

Drew Gaynor already posted that, so I posted the other method

Collectives™ on Stack Overflow

changing $scope Angular variable through a seperate JavaScript event listener

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related