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

Answer 1

有可能，但是当您要加载的模板依赖于某些范围数据时，您不能再使用该指令的templateUrl属性，您将不得不使用较低级别的API，即{{1 }和$http。

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

这可能听起来像是很多工作，但在实践中却相当简单。我建议您查看使用此模式的$templateCache指令sources。

以下是这种指令的框架：

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)); }); } } });。在这里工作：http://plnkr.co/edit/TunwvhPPS6MdiJxpNBg8?p=preview

请注意，我已将属性评估从<boom data='name'></boom>更改为属性解析，因为模板应该只在开始时确定一次。

Answer 2

这是Angular版本1.1.4+中的一个新功能我刚刚发现如果我使用当前的unstable（1.1.5），你可以将一个函数传递给一个指令的模板url。函数的第二个参数是属性指令的值，如下所示。

以下是显示官方更改的unpublished docs链接。

使用partials/template1.html作为

的模板网址

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"
])

Answer 3

我已经改变了pkozlowski.opensource的答案。

自：

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

要：

var boom = scope.data.myData

这对我有用，可以使用

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

指令中的

。

Answer 4

我有类似的问题

 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>

Answer 5

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

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

Answer 6

此问题将使用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函数。

Answer 7

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

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

你可以动态更改templateUrl吗？

7 个答案: