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

Issue with Angular from global functions, broken since beta 1.3.0b15. Need help please

Angular JS 控制器问题


抱歉这么久post。我确定这是一个简单的问题,我刚刚工作了一整夜,却对它视而不见,但希望有人能提供帮助!


这是我的 angular 示例问题。我正在将 XML 转换为 Json,而不是用 angular 解析它。我的控制器将无法工作,因为它是全局定义的。它在 Angular.JS 版本 1.3.0 beta 15 中停止工作。我已经尝试了下面列出的方法来修复它,但我没有找到任何地方。

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

这个 plunker 是它使用它的控制器的一个例子,它在 angular 1.0.4 中被定义为一个全局函数。我也放了一个 readme.md 详细解释问题!

http://plnkr.co/edit/fLgVHV1gJSigIB6jfZDH


这个问题显然是已知的,并且在 angular.js 日志的 github 中有概述。

feat($controller): disable using global controller constructors

除了简单的演示,使用全局变量没有帮助 对于控制器构造函数。这为 $controllerProvider 添加了一个新方法 重新启用旧行为,但默认情况下禁用此功能。

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

要迁移,请使用模块注册您的控制器而不是公开它们 作为全局变量:

之前:

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

前面的link给出了以下示例:

<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">
      

[我试图在这个 plunker 将其重新定义为 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 脚本有关还是其他原因。我希望有人能帮助我。

谢谢!

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

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

改为

myApp.controller('AppController', ['$scope', '$Datasource', AppController]);

基本上第二个参数应该是一个数组,其最后一个参数应该是一个提供控制器定义的函数。

编辑

使用以下语法修复 myApp 问题

angular.module('myApp').controller('AppController', ['$scope', '$Datasource', AppController]);

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

您正在使用 myApp 变量但未定义它(将模块存储在名为 myApp 的变量中或在运行时获取模块以定义控制器)