javascript - 全局函数中的 Angular 问题，自 beta 1.3.0b15 以来已损坏。需要帮助请

Question

Angular JS Controller 问题

<小时/>

抱歉发了这么长的帖子。我确信这是一个简单的问题，我刚刚工作了一整夜，对此视而不见，但希望有人可以提供帮助!

<小时/>

这是我的 Angular 示例问题。我将 XML 转换为 Json，而不是用 Angular 解析它。我的 Controller 将无法工作，因为它是全局定义的。它在 Angular.JS 版本 1.3.0 beta 15 中停止工作。我已经尝试了下面列出的内容来修复它，但我没有得到任何结果。

我在 Angular 方面并不是很有经验，但确实知道许多其他语言，所以这对我来说没有意义。也许这里有人可以帮助我。我已尽力在下面进行解释。

这个plunker是它与 Controller 一起工作的一个示例，该 Controller 在 Angular 1.0.4中定义为全局函数。我还放置了一个 readme.md 详细解释了这些问题!

http://plnkr.co/edit/fLgVHV1gJSigIB6jfZDH

<小时/>

这个问题显然是已知的，并在 github 上的 angular.js 日志中进行了概述。

feat($controller): disable using global controller constructors

除了简单的演示之外，使用全局变量没有什么帮助对于 Controller 构造函数。这会向 $controllerProvider 添加一个新方法重新启用旧行为，但默认禁用此功能。

重大变更:$controller 将不再在 window 上查找 Controller 。在 window 上查找 Controller 的旧行为最初是为了用于示例、演示和玩具应用程序。我们发现允许全局 Controller 函数鼓励不良做法，因此我们决定通过以下方式禁用此行为默认。

要迁移，请使用模块注册 Controller 而不是公开它们作为全局变量:

之前:

function MyController() {
...
}

之后:

angular.module('myApp', []).controller('MyController', [function() {
// ...
}]);

You can see the notes about the breaking change located here

<小时/> FURTHER EXPLAINED BY ANGULAR.JS HERE

上一个链接给出了以下示例:

<example>
    <example module="selectExample">
      <file name="index.html">
         <script>
        function MyCntrl($scope) {
          $scope.colors = [
            {name:'black', shade:'dark'},
            {name:'white', shade:'light'},
            {name:'red', shade:'dark'},
            {name:'blue', shade:'dark'},
             {name:'yellow', shade:'light'}
          ];
          $scope.myColor = $scope.colors[2]; // red
        }
        angular.module('selectExample', [])
          .controller('ExampleController', ['$scope', function($scope) {
            $scope.colors = [
              {name:'black', shade:'dark'},
              {name:'white', shade:'light'},
              {name:'red', shade:'dark'},
              {name:'blue', shade:'dark'},
              {name:'yellow', shade:'light'}
            ];
            $scope.myColor = $scope.colors[2]; // red
          }]);
       </script>
        <div ng-controller="MyCntrl">
        <div ng-controller="ExampleController">
           <ul>
             <li ng-repeat="color in colors">
               Name: <input ng-model="color.name">
      

<小时/>

[我试图在这个插件中将其重新定义为 Angular 函数][3]

因此，根据示例，我认为我需要更改代码:

var AppController = function($scope, DataSource) {
    var SOURCE_FILE = "example.xml";
    xmlTransform = function(data) {
        console.log("transform data");
        var x2js = new X2JS();
        var json = x2js.xml_str2json(data);
        return json.xmldata.Categories;
    };
    setData = function(data) {
        $scope.dataSet = data;
    };
    DataSource.get(SOURCE_FILE, setData, xmlTransform);
};

并将其更改为:

    myApp.controller('AppController', function($scope, Datasource) {
      var SOURCE_FILE = "example.xml";
      xmlTransform = function(data) {
          console.log("transform data");
          var x2js = new X2JS();
          var json = x2js.xml_str2json(data);
          return json.xmldata.Categories;
      };
      setData = function(data) {
          $scope.dataSet = data;
      };
      DataSource.get(SOURCE_FILE, setData, xmlTransform);
  });

When i do that, I get this error:

Error: $injector:unpr

Unknown Provider

Unknown provider: DatasourceProvider <- Datasource <- AppController

Description

<小时/>

A work around that is VERY UNWANTED! but works...

有一点需要注意，引用自 angular.js github:

虽然不建议这样做，但您可以重新启用旧行为，如下所示:

angular.module('myModule').config(['$controllerProvider', function($controllerProvider) {
  // this option might be handy for migrating old apps, but please don't use it
  // in new ones!
  $controllerProvider.allowGlobals();
}]);

但是，我不希望有这个全局函数。我不确定这个问题是否与我正在使用的 XML2JSON 脚本有关。我希望有人能帮助我。

谢谢!

Answer 1

您必须像这样注入(inject) DateSource factory 对象:

myApp.controller('AppController', ['$scope', 'DataSource', function($scope, DataSource) {
     ...
}]);