Question

我正在构建一个AngularJS应用程序，我希望根据调用它的位置动态加载不同的html模板。我是AngularJS的新手，所以我很可能会采用这种方法。

HTML

<div ng-controller="ProjectsCtrl" ng-init="getProjects()">
    <div ng-repeat="project in projects>
        <button ng-click="">Create New Project</button>
        <button ng-click="">Cancel</button>
        <div ng-repeat="task in projects.tasks>
            <button ng-click="">Create New Task</button>
            <button ng-click="">Cancel</button>
        </div>
   </div>
</div>
<focus-pane></focus-pane>

app.js

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

projectsApp.directive('focusPane', function() {
    return {
        restrict: 'E',
            // this template loading should be dynamic
            templateUrl: '_create_project.html'
    };
});

concernsApp.controller('ProjectsCtrl', function ($scope, $http, ) {
    ...
});

所以，当我点击“创建新项目”按钮时，我想要做的就是两件事：

传入project或task对象，并在focusPane指令中使用此内容。
传入模板名称以在指令中动态加载。

我在想，在伪代码中，html看起来应该是这样的：

HTML

<div ng-controller="ProjectsCtrl" ng-init="getProjects()">
    <div ng-repeat="project in projects>
        <button ng-click="createProject(project, '_create_project.html')">Create New Project</button>
        <button ng-click="">Cancel</button>
        <div ng-repeat="task in projects.tasks>
            <button ng-click="createProject(task, '_create_task.html')">Create New Task</button>
            <button ng-click="">Cancel</button>
        </div>
   </div>
</div>
<focus-pane></focus-pane>

..然后我会在ProjectsCtrl中声明这些函数。但是，正如我所说，我刚刚进入AngularJS，我不确定这是不是正确的道路。在AngularJS Docs中，我无法找到有关在指令中动态加载内容的更多信息。

Answer 1

是的，之前的评论是正确的（取决于您的工作环境），但仍然可以创建一个为您加载动态模板的指令。这是一个例子。 http://jsfiddle.net/joshkurz/T42xQ/5/

.directive('dynamicTemplate', ['$compile', '$templateCache',         function($compile, $templateCache){
return {  
    scope: { templateVar: '@'},
    link: function(scope, element, attrs){

        scope.test = 'Hello World';
        scope.$watch('templateVar', function(newV,oldV){

            if(newV !== undefined){
                var newElement = $compile($templateCache.get(newV).trim())(scope);
                element.html('');
                element.append(newElement[0]);

            }

        });

    }

}

}]）;

我发现有时在创建指令时，他们实际上可以有控制请求数据的要求。毕竟这是什么ngView做对了？它也是一个指令。您必须确保在任何DOM操作开始之前您拥有所有数据。

AngularJS动态加载指令中的内容

1 个答案: