Question

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

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

经过一些谷歌搜索后，我最后提到了这个问题：AngularJS Manually Render Controller and Template

它似乎完全符合我的要求，但它有一个使用更多参数的指令。另外，我的模板没有指令。我无法理解如何让它做我想做的事。

我如何通过代码加载ExampleTemplateToLoad.html，插入div#LoadedTemplates，同时使用控制器像普通模板一样运行？

main.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);
            });
        });
    });
});

mainTemplate.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

不确定你是否应该从控制器修改DOM，但我尝试绑定你的＆＃34; LoadedTemplates＆＃34;到变量（使用ng-model）并在控制器中，一旦从$ http.get获得动态模板，就得到对div的引用，即

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

然后按照以下方式做点什么：

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

Haven未经过测试，但这可能有所帮助：D

在AngularJS中使用控制器手动加载模板

1 个答案: