0

我有一个包含多个小部件的页面。页面加载后，我得到一个包含 url 的小部件列表。然后我 ng-include url。

每个小部件都有自己的控制器，使用<script>小部件 html 中的标签加载。由于小部件列表是动态的，因此我无法在页面加载时加载小部件 .js 文件。（当我这样做时，它工作正常。）我不断收到错误消息。

我正在尝试将 $http 调用包装在服务中，以使我的控制器单元可测试。

这是我的 HTML：

<script src="/widget/fooWidget.js"></script>

<div ng-controller="FooWidgetCtrl">
    ...
</div>

这是我的 fooWidget.js：（我Widgets在页面加载时加载的文件中定义了一个模块）

Widgets.service('FooWidgetSvc', function($http) {
    this.getSomething = function() {
        // $http methods
    }
});

function FooWidgetCtrl($scope, $http, FooWidgetSvc) {
    FooWidgetSvc.getSomething();
    return $scope.FooWidgetCtrl = this;
}

我收到以下错误：

Error: Unknown provider: FooWidgetSvcProvider <- FooWidgetSvc
at Error (<anonymous>)

我预计会发生这种情况，因为我正在尝试在角度引导过程完成后定义服务。

如果有帮助，我可以做一个笨拙的人。

更新

感谢您到目前为止的回复。我创建了一个 plunker 来帮助说明我的问题：http ://plunker.co/edit/iKzwnlZ7bNDjmR05qGDC

我已经弄清楚如何手动注册控制器，并将其包含在 plunker 中。

4

2 回答 2

2

好的，伙计们，抱歉跑来跑去。我终于读了足够多的文档，我弄明白了。

在 Angular 消化完所有内容后，我试图创建一个服务，这意味着我必须使用 $controllerProvider 手动将控制器附加到模块，并使用 $provide 将服务附加到模块：

var WidgetsControllerProvider = null;
var WidgetsProvider = null;

var Widgets = angular.module('widgets', [], function($controllerProvider, $provide) {
  WidgetsControllerProvider = $controllerProvider;
  WidgetsProvider = $provide;
});

现在我可以像这样手动添加服务和控制器：

WidgetsProvider.factory('blergWidgetSvc', function($http) {
  return {
    getCountry: function(callback) {
      // code
    }
  };
});

WidgetsControllerProvider.register('blergWidgetCtrl', function($scope, blergWidgetSvc) {
    // code
});

我已经分叉并更新了plunker以显示我的解决方案。

于 2013-07-03T05:28:19.153 回答
0

这对你有用吗？

Widgets.service('FooWidgetSvc', function($http) {
    this.getSomething = function() {
        // $http methods
    }
}).controller('FooWidgetCtrl', function($scope, $http, FooWidgetSvc) {
    FooWidgetSvc.getSomething();
}
于 2013-07-02T00:42:09.500 回答