javascript - Angular Directive 从模板 url 更新 View

Question

我最近开始学习angularjs并且正在做一些事情。我尝试使用 this actice example ，特别是3个例子。我尝试通过 url 读取模板文件，但不能。我得到了以下代码(这里只是我更改的代码):

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

app.value('MultiViewPaths',
    {'/' : {
        content : {
            templateUrl : './templates/_header.html'
        },
        secondaryContent :  {
            templateUrl : './templates/_secondaryContent.html',
            controller : 'ListUsersCtrl'
        }
    },
        '/cats' : {
            content:  {
                templateUrl : 'templates/_headerCats.html',
                controller : 'ListCatsCtrl'
            },
            secondaryContent :  {
                templateUrl : 'templates/_secondaryContentCats.html',
                controller : 'CatOfTheMinuteCtrl'
            }
        }
    });

app.directive("ngMultiView", ['$rootScope', '$compile', '$controller', '$location', 'MultiViewPaths','$templateCache', function($rootScope, $compile, $controller, $location, MultiViewPaths, $templateCache){
    var getTemplate = function(templateUrl) {
        console.log(templateUrl)
        var template = $templateCache.get(templateUrl);
        console.log(template)
        return template
    }

    return {
        terminal: true,
        priority: 400,
        transclude: 'element',
        compile : function(element, attr, linker){
            return function(scope, $element, attr) {
                var currentElement,
                    panel = attr.ngMultiView;

                $rootScope.$on('$locationChangeSuccess', update);
                update();

                // update view
                function update(evt, newUrl, oldUrl){
                    if(!newUrl){ return }
                    var url = newUrl.match(/#(\/.*)/),
                        match, template, controller;

                    match = url ? MultiViewPaths[url[1]] : MultiViewPaths['/'];
                    template = getTemplate(match[panel].templateUrl);
                    console.log(template)
                    controller = match[panel].controller;

                    if(template){
                        var newScope = scope.$new(),
                            locals = {},
                            newController = controller;

                        linker(newScope, function(clone){
                            clone.html(template);
                            $element.parent().append(clone);

                            if(currentElement){
                                currentElement.remove();
                            }

                            var link = $compile(clone.contents());

                            currentElement = clone;

                            if (newController) {
                                locals.$scope = newScope;
                                var controller = $controller(newController, locals);
                                clone.data('$ngControllerController', newController);
                                clone.children().data('$ngControllerController', newController);
                            }

                            link(newScope);
                            newScope.$emit('$viewContentLoaded');
                        });

                    }else{
                        //cleanup last view
                    }
                }
            }
        }
    }
}]);

其他与示例相同。我无法读取 html 内部的模板。谁能帮我吗？

Answer 1

我建议使用uiRouter而不是 ngRouter。使用 uiRouter，您无需创建指令来处理更改不同 URL 参数的 View 。

他们在这里给出了如何使用 $stateProvider 执行此操作的示例 http://angular-ui.github.io/ui-router/site/#/api/ui.router.state .$stateProvider

templateUrl: function(params) {
    return myTemplates[params.pageId]; }