3

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 ?

Community
  • 1
  • 1
morrisstu
  • 99
  • 1
  • 1
  • 9

4 Answers4

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

alexey
  • 1,381
  • 9
  • 19
  • 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 Mar 09 '16 at 20:06
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

Slava N.
  • 596
  • 4
  • 6
  • 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 Mar 09 '16 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](https://jsfiddle.net/nikishkinvv/wuucd8yd/) I made an example. – Slava N. Mar 09 '16 at 20:36
0

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.

German Blanco
  • 816
  • 6
  • 9
  • 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 Mar 09 '16 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 Mar 10 '16 at 06:55
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>
George
  • 2,842
  • 2
  • 15
  • 11