来自控制器外部的 Angular JS 访问范围答案

【问题标题】：Angular JS access scope from outside of controller来自控制器外部的 Angular JS 访问范围
【发布时间】：2016-06-24 09:09:40
【问题描述】：

所以我刚刚尝试将普通 JS 更改为 angular，我想知道如何从另一个 .js 文件访问我的控制器范围。我环顾四周，尝试了几种方法，但都没有成功。

我发现了类似的问题，如下所示

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

AngularJS access scope from outside js function

我不希望对范围值进行任何更改，而只是使用范围内的函数。关于如何从另一个 .js 文件中的控制器范围调用函数的任何想法？

【问题讨论】：

标签： javascript angularjs cordova

【解决方案1】：

你可以这样称呼它：例如html：

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

还有 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';
}

如您所见，您需要通过 ID 获取，而不是控制器的名称。

Fiddle

【讨论】：

嗨，Alexey，我今天晚上早些时候遇到了这个解决方案，但我一直收到错误消息，我已经编辑了问题以提供更多信息。

【解决方案2】：

在你应用 ng-controller 的地方添加一个 id，然后获取范围就这么简单：

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

见fiddle

【讨论】：

在另一个 JavaScript 文件中，例如文件名为 .应用程序.js ？我对 DIV 标签的理解是它纯粹在 HTML 中。
无论是在与 div 的同一个文件中还是在另一个文件中，调用作用域的位置都没有关系。 Here我做了一个例子。

【解决方案3】：

您需要注入 $controller 服务以在任何其他 Js 中实例化控制器（您要使用此功能扩展的文件。我将在此示例中使用另一个控制器）：

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>

但是，如果可以的话，您应该创建一个具有您想要共享的功能的服务，并在您想要使用此功能的任何地方注入服务。

【讨论】：

我从早些时候就一直在玩它，想知道是否有可能以相反的方向进行操作，即将对象/变量传递给控制器？该建议的困难之处在于我无法在某些部分使用 any HTML 元素。
当然，您可以从视图中的函数发送一个对象或任何其他值作为参数。像这样的东西： vm.fileCreate(OBJECT/VARIABLE);

【解决方案4】：

你也可以试试这个。

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

<div ng-controller="myController"> 

</div>

【讨论】：