如何通过templateUrl在属性范围变量传递 [英] How to pass in templateUrl via scope variable in attribute

问题描述

我想在url中传递用于通过范围的变量的模板。的范围将不会改变，因此该模板并不需要根据它来更新，但目前的范围变量始终未定义

I'm trying to pass in the url for the template via a scope variable. The scope will not change so the template doesn't need to update based on it, but currently the scope variable is always undefined.

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

理想情况下，指示将是：

Ideally the directive would be:

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

然而，这并不正常工作。我已经尝试了很多不同的排列在实现相同的概念，这似乎最接近的，但它仍然无法正常工作。

This doesn't work however. I've tried a lot of different permutations in accomplishing the same concept, and this seems the closest, however it still doesn't work.

.directive("cellItem", ["$compile", '$http', '$templateCache', '$parse', function ($compile, $http, $templateCache, $parse) {
        return {
            scope: {
                template: '@template'
            },
            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-包括，但也不会在编译之前评估范围的变量。该CellTemplate值是从数据库调用来得那么是评估前完全未知。获得此工作的任何建议将不胜AP preciated！

I've also tried using ng-include, but that also doesn't evaluate scope variables before compiling. The CellTemplate value is coming from a database call so is completely unknown before evaluation. Any suggestions for getting this working would be greatly appreciated!

编辑：
我使用的角度1.0.8，我不能够升级到新的版本。

I'm using angular 1.0.8 and am not able to upgrade to a newer version.

推荐答案

您已经为时不远了的。

您不必使用分离的范围为指令。您可以通过templateUrl是这样的：

You don't need to use an isolated scope for the directive. You can pass the templateUrl like this:

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

然后添加一个手表，以检测当模板值改变：

Then add a watch to detect when the template value changes:

.directive("cellItem", ["$compile", '$http', '$templateCache', '$parse', function ($compile, $http, $templateCache, $parse) {
        return {
            restrict: 'A',
            link: function(scope , element, 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=$p $ PVIEW

Here is a working Plunker: http://plnkr.co/edit/n20Sxq?p=preview

这篇关于如何通过templateUrl在属性范围变量传递的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！