如何$编译角模板，使其在多个控制器与别名工作？(How to $compile angular te

我有一个自定义的指令，只需$编译模板到另一个。

.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路由器），在任何模板，所有的模型是这样的：

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

我如何在多个模板，其中CtrlAlias改变这个指令的工作？

我试图改变$编译（内容）（范围）; 到$编译（内容）（scope.newCtrlAlias）;

有任何想法吗？

Answer 1:

当你$编译，然后链接，你可以自由地提供自己的范围针对的编译内容链接。这意味着，你可以在模板内容指一些任意视图模型的名字，说vm ：

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

和针对具有范围链接vm属性：

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

它实际上可能会更有效使用的分离范围为已编译的内容，以确保您不会承担范围内的变量，可能会或可能不会在那里当内容被链接的存在：

.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>

Answer 2:

真的不知道我理解你为什么会需要使用这个，所以它不是容易回答。然而，一个可能的解决方案可以是包裹在模板中<div>可向其中追加所需的控制器的信息。这是一个有点恶心，但它可能为你工作。你将不得不在控制器的名字来传递和它的别名，但你也许可以添加到您的$state的数据属性和访问他们，但再次这一切似乎有点哈克。

DEMO

app.directive('staticInclude', function($http, $templateCache, $compile) {

  return {

    scope: {
      ctrlName    : '@',
      alias       : '@'
    },

    link: link

  };


  function link(scope, element, attrs) {

      var templatePath = attrs.staticInclude;

      $http
        .get(templatePath, {
            cache: $templateCache
        })
        .success(function(response) {

          var ctrlStr   = scope.ctrlName + ' as ' + scope.alias,
              template  = '<div ng-controller="' + ctrlStr + '" >' + response + '</div>',
              contents  = element.html(template).contents();

            $compile(contents)(scope);

        });

  };

});

文章来源: How to $compile angular template to make it work in multiple controllers with aliases?