你可以在飞行中改变templateUrl？(Can you change templateUrl o

2019-07-19 01:40发布

站内文章 / 前端开发

11 0

该账号已被封号

女 | 书童

私信

是否有可能在该指令的范围将值传递给改变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，即$http和$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}}到属性，因为可能是一个模板解析只能用一次决定，一开始。

Answer 2:

这是角版本中的新功能1.1.4+我刚刚发现，如果我使用当前不稳定（1.1.5），您可以通过函数到指令的模板URL。函数的第二个参数是属性指令的值如下所示。

下面是该链接未发布的文件显示官方变化。

要使用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:

这是一个后续的答案，解决与以前的答案的几个问题。值得注意的是，它只会一次编译模板（如果你有很多的这些网页上的这一点很重要，它已被链接。它还会将类和风格后，从原来的元素到它会更改到模板观看模板（虽然不是很优雅的方式角内部确实当您使用“替换：真正的”不像使用模板或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-包括如下：

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

与调用指令中的链接功能任意温度参数switchTemplate功能。