你可以随时更改templateUrl吗？
是否可以通过在指令的作用域中传递值来即时更改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. } }); 这是可能的，但是当你的模板被加载取决于一些范围的数据，你不能再使用该指令的templateUrl属性，你将被迫使用低级的API，即$http和$compile 。
粗略地说，你需要做什么（只能在链接函数中使用）是使用$http检索模板的内容（不要忘记涉及$templateCache ！），然后手动编译模板的内容。
这可能听起来像是很多工作，但在实践中它是相当简单的。 我build议看一下使用这种模式的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> 。 在这里工作plunk： http ://plnkr.co/edit/TunwvhPPS6MdiJxpNBg8? p= preview
请注意，我已将属性评估从{{name}}更改为属性parsing，因为在开始时可能只应确定一次模板。
这是Angular版本1.1.4+中的一个新特性，我刚刚发现如果使用当前的unstable（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" ])
我已经改变了一点pkozlowski.opensource的答案。
从：
var boom = $parse(iAttrs.data)(scope);
至：
var boom = scope.data.myData
这对我有用，可以使用
<boom data="{{myData}}" />
在指令中。
我有类似的问题
return { restrict: 'AE', templateUrl: function(elm,attrs){return (attrs.scrolled='scrolled' ?'parts/scrolledNav.php':'parts/nav.php')}, replace: true,
这是一个后续的答案，解决了以前的答案几个问题。 值得注意的是，它只会编译一次模板（如果你的页面上有很多这样的模板，这个模板是非常重要的），它会在模板链接之后监视模板的变化，它也将类和样式从原始元素复制到模板（虽然不是以很好的方式在内部使用“replace：true”），但是与使用template或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(); }); } }; } ])
这些答案是好的，但不是专业的。 有一个使用templateUrl的语法，我们不经常使用。 它可以是返回一个url的函数。这个函数有一些参数。 如果你想要更多这里是一个很酷的文章
