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

问题描述

我有一个自定义指令，该指令将$模板简单地编译为另一个.

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

我像这样使用它:

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

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

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>

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

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

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

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

有什么想法吗?

推荐答案

在$ compile然后进行链接时，可以自由提供自己的作用域，以与之链接已编译的内容.这意味着您可以让模板内容引用某个任意的ViewModel名称，例如vm:

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>

并链接到具有vm属性的范围:

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

然后用法如下:

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

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