javascript - 在 AngularJS 中使用 Controller 手动加载模板

Question

在 AngularJS 中，我尝试手动加载使用预定义 Controller 的模板。

我调用 WebApi 来获取可用模板的列表。收到此列表后，我应该将每个模板加载到页面上。每个模板还使用 AngularJS Controller ，因此模板和预加载 Controller 之间的连接必须有效。

经过一番谷歌搜索后，我最终找到了之前的(有点旧的)问题:AngularJS Manually Render Controller and Template

它似乎完全符合我的要求，但它的指令使用的参数超出了我的需要。另外，我的模板没有指令。我就是不知道如何让它做我想做的事。

如何让 ExampleTemplateToLoad.html 通过代码加载，插入到 div#LoadedTemplates 中，同时使用 Controller 像普通模板一样运行？

ma​​in.js

var myApp = angular.module('myApp', [.....]);
myApp.config(function($routeProvider) {
    $routeProvider.when('/', { templateUrl : '/mainTemplate.html' });
});

myApp.controller('mainController', function ($scope, $http) {
    $http.get('/api/getListOfTemplateScripts').success(function (data) {
        // This returns a list of scripts that should be loaded
        // Scripts are loaded using https://github.com/ded/script.js
        // These scripts show up in "Sources" in Chrome Developer Tools,
        // and any syntax errors in these scripts are also displayed in
        // the console, so the script is definitely loaded
        angular.forEach(data, function (scriptFile, key) {
            $script(scriptFile, function() {
                console.log(scriptFile + " loaded");
            });
        });
    })
    .then(function() {
        $http.get('/api/getListOfTemplate').success(function (data) {
            // This returns a list that includes ExampleTemplateToLoad.html
            // The template should then be loaded into div#LoadedTemplates
            angular.forEach(data, function (templateFile, key) {
                // This is logged *after* "scriptToLoad loaded" in the console
                console.log('Loading template ' + templateFile);
            });
        });
    });
});

ma​​inTemplate.html

<div ng-controller="mainController">
    <div id="LoadedTemplates"></div>
</div>

ExampleTemplateToLoad.html

<div ng-controller="loadedTemplateController">
    <!-- Do whatever the template needs to do, using variables defined
         in $scope as it would normally do -->
</div>

ExampleTemplateControllerToLoad.js

myApp.controller('loadedTemplateController', function ($scope, $http) {
});

Answer 1

不确定你是否应该从 Controller 修改 DOM，但一旦你从 $http 返回动态模板，我会尝试将你的“LoadedTemplates”绑定(bind)到变量(使用 ng-model)和 Controller 中.get，获取div的引用，即

var target = $document[0].getElementById('LoadedTemplates')

然后按照以下方式做一些事情:

element.append(htmlReturnedByService);
$compile( element.contents() )( $scope );

尚未测试，但这也许有帮助:D