Question

我有一个模板和一个控制器实例。模板上没有ng-controller指令。我想以一种使用我提供的控制器实例的方式编译模板。这是我到目前为止的代码：

var scope = $scope.$new();
var template = $templateCache.get('path/to/template.tpl.hml');
var controller = $controller('SomeController', {
    $scope: scope,
    foo: { ... },
    bar: { ... }
});
var html = $compile(template)(scope);

// Doesn't work correctly because the template has no controller.
scope.$apply();

对于那些想知道我为什么要这样做的人：我有一个表单，我使用ui-bootstrap $modal service以模态弹出。我传递给$ modal的参数是：模板URL，控制器名称和包含我想要注入控制器的一堆数据的对象（有关更多内容，请参阅链接文档）。 $ modal服务负责实例化控制器，将数据注入其中，编译模板，并将所有这些内容粘贴到Bootstrap模式对话框中。由于$ modal必须将内容注入控制器，因此模板上不能包含ng-controller属性。

弹出模态在我的应用程序中正常工作，因为$ modal在幕后扮演它的魔力，并以某种方式让我的模板知道它应该使用什么控制器，但当我写单元时事情并不那么乐观测试

在我的测试中，我想使用$ compile服务自己编译模板。这使我可以轻松访问我的表单范围和DOM树。当然，我无法做到这一点，因为我无法弄清楚$ modal在幕后做了什么。

任何？

Answer 1

通过查看the source for ng-controller，您会发现这是一个非常简单的指令：

var ngControllerDirective = [function() {
  return {
    scope: true,
    controller: '@',
    priority: 500
  };
}];

所以$ modal中的魔力可能类似。为测试（甚至是生产）目的创建自己的ng-controller很容易。然后在您的测试中，您可以使用：

$scope = $rootScope.$new();
var template = '<div my-controller="ctrl1">{{x}}</div>'
html = $compile(template)($scope);
$scope.$apply();

ctrl1仅用于测试。请参阅here的实际操作。

但这可能比你需要的更多。在测试中，为什么不在运行时添加ng-controller：

$scope = $rootScope.$new();
var template = '<div>{{x}}</div>'
html = $compile(template)($scope);
html.attr('ng-controller', 'ctrl1');
html = $compile(html)($scope);
$scope.$apply();

请参阅here实际操作。

给定AngularJS中的模板和控制器实例，如何以使用我的控制器实例的方式编译模板？

1 个答案: