Angular JS access scope from outside of controller

Question

So I've just tried making the change from plain JS to angular and I'm wondering how I would access my controllers scope from another .js file. I've looked around and I've tried a couple of ways but no luck.

I've found similar questions such as below such as

AngularJS. How to call controller function from outside of controller component

AngularJS access scope from outside js function

I'm not looking to make any changes to a scope value, rather just use a function from within the scope. Any ideas on how I'd go about calling the function from the controllers scope in another .js file ?

alexey · Accepted Answer · 2016-03-09 20:16:17Z

6

You can call it like this: For example html:

<div ng-app>
<div id="outer" ng-controller="MsgCtrl">
    You are {{msg}}
</div>
<div onclick="change()">click me</div>

And JS:

    function MsgCtrl($scope) 
{
    $scope.msg = "great";
}

function change()
{
    //alert("a");
    var scope = angular.element(document.getElementById('outer')).scope();
    console.log(scope);
    //scope.msg = 'Superhero';
}

As you can see you need to get by ID, not controller's name.

Fiddle

edited Mar 9, 2016 at 20:16

answered Mar 9, 2016 at 19:44

alexey

1,41112 silver badges20 bronze badges

Hey Alexey, I came across that solution earlier this evening yet I keep getting an error, I've edited the question to give some more info.
– morrisstu
Commented Mar 9, 2016 at 20:06

Add a comment |

Slava N. · Accepted Answer · 2016-03-09 20:37:14Z

0

Put an id to tag where you apply ng-controller, then getting scope would be as simple as this:

<div ng-controller="MyController id="myScope">
</div>
..
var myScope = angular.element(myScope);
myScope.runSomeFn();

See fiddle

edited Mar 9, 2016 at 20:37

answered Mar 9, 2016 at 20:06

Slava N.

5964 silver badges6 bronze badges

Within another JavaScript file e.g file name is . app.js ? My understanding of the DIV tag is that it's purely within HTML.
– morrisstu
Commented Mar 9, 2016 at 20:11
It doesn't matter where to put call to scope, if this in the same file with div or in another. Here I made an example.
– Slava N.
Commented Mar 9, 2016 at 20:36

Add a comment |

German Blanco · Accepted Answer · 2016-03-10 07:05:04Z

You need to inject $controller service to instantiate a controller inside any other Js (the file you want to extend with this function. I will use another controller for this example):

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

app.controller('fileCreateController',[function(){
  
  this.action = 'Initial value';
  
  this.fileCreate = function(value){
    
    console.log('ACTION');
    
    this.action = value;
    
  }
  
}]);

app.controller('anyController', ['$controller', function($controller){
  this.valueToSend =  'Changed value from fileCreateController';
  angular.extend(this, $controller('fileCreateController'));
  
  }]);

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  </head>
  <body ng-controller="anyController as vm">
    <button name="button" ng-click="vm.fileCreate(vm.valueToSend)">Click me</button>
   <p>{{vm.action}}</p>
  
  </body>
</html>

However, if you can, you should create a Service with the function you want to share, and inject the service wherever you want to use this function.

I've been playing around with it since earlier and was wondering would it be possible to do it in the reverse direction i.e. pass an object/variable over to the controller ? The difficult thing with the suggestion is due to cordova I'm unable to use any HTML elements in certain parts. — morrisstu, Commented Mar 9, 2016 at 22:37
Sure, you can send an objec or any other value as parameter from the function in the view. Something like this: vm.fileCreate(OBJECT/VARIABLE); — German Blanco, Commented Mar 10, 2016 at 6:55

George · Accepted Answer · 2017-08-24 12:53:24Z

0

You can try also this.

<script>
var myConEle = document.querySelector('[ng-controller=myController]');
var $scope = angular.element(myConEle).scope();
</script>

<div ng-controller="myController"> 

</div>

answered Aug 24, 2017 at 12:53

George

3,0202 gold badges17 silver badges11 bronze badges

Add a comment |

Collectives™ on Stack Overflow

Angular JS access scope from outside of controller

4 Answers 4

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Linked

Related