如何 $compile angular 模板以使其在具有别名的多个控制器中工作? [英] How to $compile angular template to make it work in multiple controllers with aliases?

问题描述

我有一个自定义指令，它只是将一个模板编译成另一个模板.

.directive('staticInclude', function($http, $templateCache, $compile) {返回函数(范围，元素，属性){var templatePath = attrs.staticInclude;//$http.get(templatePath, {缓存:$templateCache}). 成功(功能(响应){var content = element.html(response).contents();$编译(内容)(范围)；});};});

我使用它:

<div static-include="components/campaign/details.html"></div>

因为我为控制器使用别名(使用 angular UI 路由器)，任何模板中的所有模型都类似于:

交付时间:{{CtrlAlias.campaign.newsletter.sentDate |日期:CtrlAlias.currentUser.params.settings}}</span></p>

如何使该指令在 CtrlAlias 更改的多个模板中工作?

我尝试更改 $compile(contents)(scope);进入 $compile(contents)(scope.newCtrlAlias);

有什么想法吗?

解决方案

当您 $compile 然后链接时，您可以自由地提供自己的范围，编译内容链接到该范围.这意味着你可以让模板内容引用一些任意的 ViewModel 名称，比如 vm:

交付时间:{{vm.campaign.newsletter.sentDate}}</span></p>

并链接到具有 vm 属性的作用域:

var scope = { vm: {...} }

为编译内容使用隔离范围实际上甚至可能很有用，以确保您没有假设存在链接内容时可能存在或不存在的范围变量:

.directive('staticInclude', function($templateRequest, $compile) {返回 {链接:功能(范围，元素，属性){var 别名 = attrs.alias ||'vm';var templatePath = attrs.staticInclude;var newScope = scope.$new(true);//隔离作用域newScope.vm = 范围[别名];//$templateRequest 本质上是带有 $templateCache 的 $http$templateRequest(templatePath).then(函数(html){$compile(html)(newScope, 函数 cloneAttachFn(clone){element.empty();element.append(克隆);});});}};});

然后用法是这样的:

<div static-include="components/campaign/details.html" alias="main">

I have a custom directive that simply $compiles a template into another.

.directive('staticInclude', function($http, $templateCache, $compile) {
        return function(scope, element, attrs) {
            var templatePath = attrs.staticInclude;
            //
            $http.get(templatePath, {
                cache: $templateCache
            }).success(function(response) {
                var contents = element.html(response).contents();
                $compile(contents)(scope);
            });
        };
    });

I use it like:

<div static-include="components/campaign/details.html"></div>

Because I'm using aliases for the controller (using angular UI router), all model in any of the templates are like:

<p>Delivery Time: <span class="text-medium">{{CtrlAlias.campaign.newsletter.sentDate | date:CtrlAlias.currentUser.params.settings}}</span></p>

How do I make this directive work in multiple templates where CtrlAlias changes?

I tried changing $compile(contents)(scope); into $compile(contents)(scope.newCtrlAlias);

Any ideas?

解决方案

When you $compile and then link, you are free to provide your own scope against which the compiled content is linked. That means that you can have the template content refer to some arbitrary ViewModel name, say vm:

<p>Delivery Time: <span>{{vm.campaign.newsletter.sentDate}}</span></p>

And link against a scope that has vm property:

var scope = { vm: {...} }

It actually might be even useful to use an isolate scope for your compiled content, to make sure that you aren't assuming an existence of scope variables that may or may not be there when the content is linked:

.directive('staticInclude', function($templateRequest, $compile) {
  return {
    link: function(scope, element, attrs){
       var alias = attrs.alias || 'vm';
       var templatePath = attrs.staticInclude;

       var newScope = scope.$new(true); // isolate scope
       newScope.vm = scope[alias];

       // $templateRequest is essentially $http with $templateCache
       $templateRequest(templatePath)
           .then(function(html){
              $compile(html)(newScope, function cloneAttachFn(clone){
                 element.empty();
                 element.append(clone);
              });
           });
    }
  };
});

Then usage is like so:

<div ng-controller="MainCtrl as main">
    <div static-include="components/campaign/details.html" alias="main">
    </div>
</div>

这篇关于如何 $compile angular 模板以使其在具有别名的多个控制器中工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！