Question

我最近开始学习angularjs，我正在做一些事情。我尝试使用this actice example，尤其是3个示例。我试图通过他们的网址读取tempate文件，但我不能。我得到了以下代码（这里只更改了代码的安静性）：

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参数的视图。

他们使用$stateProvider http://angular-ui.github.io/ui-router/site/#/api/ui.router.state提供了一个如何执行此操作的示例。$ stateProvider

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

角度指令更新视图来自模板URL

1 个答案: