angularjs – 如何通过属性中的范围变量传递templateUrl

我正在尝试通过范围变量传递模板的URL.范围不会更改,因此模板不需要基于它进行更新,但是当前范围变量始终未定义.
<div cell-item template="{{col.CellTemplate}}"></div>

理想情况下,指令将是:

.directive("cellItem",["$compile",'$http','$templateCache','$parse',function ($compile,$http,$templateCache,$parse) {
        return {
            scope: {
                template: '@template'
            },templateUrl: template // or {{template}} - either way
        };
    }])

但是,这不起作用.我已经尝试了许多不同的排列来完成相同的概念,这似乎是最接近的,但它仍然不起作用.

.directive("cellItem",link: function (scope,element,attrs) {
                var templateUrl = $parse(attrs.template)(scope);
                $http.get(templateUrl,{ cache: $templateCache }).success(function (tplContent) {
                    element.replaceWith($compile(tplContent)(scope));
                });
            }
        };
    }])

我也尝试过使用ng-include,但在编译之前也没有评估范围变量. CellTemplate值来自数据库调用,因此在评估之前完全未知.任何有关此工作的建议将不胜感激!

编辑:
我正在使用angular 1.0.8并且无法升级到更新版本.

你离我不远.

您不需要为指令使用隔离范围.您可以像这样传递templateUrl:

<div cell-item template="col.CellTemplate"></div>

然后添加一个监视以检测模板值何时更改:

.directive("cellItem",$parse) {
        return {
            restrict: 'A',link: function(scope,attrs) {

              scope.$watch(attrs.template,function (value) {
                if (value) {
                  loadTemplate(value);
                }
              });

              function loadTemplate(template) {
                  $http.get(template,{ cache: $templateCache })
                    .success(function(templateContent) {
                      element.replaceWith($compile(templateContent)(scope));                
                    });    
              }
            } 
        }
    }]);

这是一个有效的Plunker:http://plnkr.co/edit/n20Sxq?p=preview

相关文章

AngularJS 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...