angularjs - 您可以即时更改 templateUrl 吗？

Question

是否可以通过在指令范围内传递值来动态更改 templateUrl？我想将数据传递给控制器，该控制器将根据从指令传递的数据呈现页面

可能看起来像这样的东西：

<div> 
   <boom data="{{myData}}" />
</div> 

.directive('boom', function {
        return {
            restrict: 'E',
            transclude: true,
            scope: 'isolate',
            locals: { data: 'bind' },
            templateUrl: "myTemplate({{boom}}})" // <- that of course won't work.
        }
    });

score 54 · Accepted Answer

这是可能的，但是当您要加载的模板依赖于某些范围数据时，您将无法再使用指令的templateUrl属性，您将不得不使用较低级别的 API，即$httpand $compile。

您需要做的大致（仅在链接功能中可能）是使用$http（不要忘记涉及$templateCache！）检索模板的内容，然后“手动”编译模板的内容。

听起来可能需要做很多工作，但实际上它相当简单。我建议查看使用此模式的ngInclude指令源。

这是这样一个指令的框架：

app.directive('boom', function($http, $templateCache, $compile, $parse) {
        return {
            restrict: 'E',
            link: function(scope , iElement, iAttrs) {                            
              var boom = $parse(iAttrs.data)(scope);
              $http.get('myTemplate'+boom, {cache: $templateCache}).success(function(tplContent){
                iElement.replaceWith($compile(tplContent)(scope));                
              });              
            } 
        }
    });

假设它将被用作<boom data='name'></boom>. 在这里工作：http ://plnkr.co/edit/TunwvhPPS6MdiJxpNBg8?p=preview

请注意，我已经将属性评估从属性解析更改{{name}}为属性解析，因为可能一个模板应该只在开始时确定一次。

score 16 · Accepted Answer

这是 Angular 版本 1.1.4+ 中的一项新功能，我刚刚发现如果我使用当前的不稳定 (1.1.5)，您可以将函数传递到指令的模板 url。该函数的第二个参数是属性指令的值，如下所示。

这是显示官方更改的未发布文档的链接。

用作partials/template1.html模板 url

html:

<div sub_view="template1"></div>

指示：

.directive('subView', [()->
  restrict: 'A'
  # this requires at least angular 1.1.4 (currently unstable)
  templateUrl: (notsurewhatthisis, attr)->
    "partials/#{attr.subView}.html"
])

score 3 · Accepted Answer

我有类似的问题

 return {
        restrict: 'AE',
        templateUrl: function(elm,attrs){return (attrs.scrolled='scrolled' ?'parts/scrolledNav.php':'parts/nav.php')},
        replace: true,

partnersSite.directive('navMenu', function () {
    return {
        restrict: 'AE',
        templateUrl: function(elm,attrs){return (attrs.scrolled='scrolled' ?'parts/scrolledNav.php':'parts/nav.php')},
        replace: true,
        link: function (scope, elm, attrs) {
            scope.hidden = true;
            //other logics
        }
    };
});

<nav-menu scrolled="scrolled"></nav-menu>

score 2 · Accepted Answer

我稍微改变了 pkozlowski.opensource 的答案。

从：

var boom = $parse(iAttrs.data)(scope);

至：

var boom = scope.data.myData

这对我有用，可以使用

<boom data="{{myData}}" />

在指令中。

score 2 · Accepted Answer

这个问题将通过 ng-include 解决，如下所示：

MyApp.directive('boom', function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: 'isolate',
      locals: { data: 'bind' },
      templateUrl: '<div ng-include="templateUrl"></div>',
      link: function (scope) {
        function switchTemplate(temp) {
          if (temp == 'x')
          { scope.templateUrl = 'XTemplate.html' }
          else if (temp == 'y')
          { scope.templateUrl = 'YTemplate.html' }
        }
      }
    }
});

在指令的链接函数中调用带有任意 temp 参数的 switchTemplate 函数。

score 1 · Accepted Answer

这是一个后续答案，解决了先前答案的一些问题。值得注意的是，它只会编译一次模板（如果您的页面上有很多模板，这一点很重要，并且它会在模板链接后监视模板的更改。它还将类和样式从原始元素复制到模板（尽管当您使用“replace：true”时，Angular 不会以非常优雅的方式在内部执行。与当前使用模板或 templateUrl 的函数的 Angular 支持方法不同，您可以使用范围信息来确定要加载的模板。

.directive('boom', ['$http', '$templateCache', '$compile', function ($http, $templateCache, $compile) {
    //create a cache of compiled templates so we only compile templates a single time.
    var cache= {};
    return {
        restrict: 'E',
        scope: {
            Template: '&template'
        },
        link: function (scope, element, attrs) {
            //since we are replacing the element, and we may need to do it again, we need
            //to keep a reference to the element that is currently in the DOM
            var currentElement = element;
            var attach = function (template) {
                if (cache[template]) {
                    //use a cloneAttachFn so that the link function will clone the compiled elment instead of reusing it
                    cache[template](scope, function (e) {
                        //copy class and style
                        e.attr('class', element.attr('class'));
                        e.attr('style', element.attr('style'));
                        //replace the element currently in the DOM
                        currentElement.replaceWith(e);
                        //set e as the element currently in the dom
                        currentElement = e;
                    });
                }
                else {
                    $http.get('/pathtotemplates/' + template + '.html', {
                        cache: $templateCache
                    }).success(function (content) {
                        cache[template] = $compile(content);
                        attach(template);
                    }).error(function (err) {
                        //this is something specific to my implementation that could be customized
                        if (template != 'default') {
                            attach('default');
                        }
                        //do some generic hard coded template
                    });
                }
            };

            scope.$watch("Template()", function (v, o) {
                if (v != o) {
                    attach(v);
                }
            });
            scope.$on('$destroy', function(){
                currentElement.remove();
            });
        }
    };
} ])

score 0 · Accepted Answer

这些答案很好，但不专业。有一种 using 的语法templateUrl，我们不经常使用。它可以是一个返回 url 的函数。该函数有一些参数。如果你想要更多这里是一篇很酷的文章

http://www.w3docs.com/snippets/angularjs/dynamically-change-template-url-in-angularjs-directives.html

angularjs - 您可以即时更改 templateUrl 吗？

7 回答 7

Related

Reference