是否可以在保留Angular指令范围的同时进行“超越"操作? [英] Is it possible to 'transclude' while keeping the scope of the directive in Angular?

问题描述

是否可以在Angular中执行以下操作?

Is possible to do the following in Angular?

<div ng-controller="MainCtrl" ng-init="name='World'">
    <test name="Matei">Hello {{name}}!</test> // I expect "Hello Matei"
    <test name="David">Hello {{name}}!</test> // I expect "Hello David"
</div>

我的指令很简单，但是不起作用:

My directive is simple but it's not working:

app.directive('test', function() {
  return {
    restrict: 'E',
    scope: {
      name: '@'
    },
    replace: true,
    transclude: true,
    template: '<div class="test" ng-transclude></div>'
  };
});

我还尝试使用transclude函数更改范围，并且它可以工作.唯一的问题是我丢失了模板.

I also tried to use the transclude function to change the scope and it works. The only problem is that I loose the template.

app.directive('test', function() {
  return {
    restrict: 'E',
    scope: {
      name: '@'
    },
    transclude: true,
    template: '<div class="test" ng-transclude></div>',
    link: function(scope, element, attrs, ctrl, transclude) {
      transclude(scope, function(clone) {
        element.replaceWith(clone);
      });
    }
  };
});

是否可以在将模板保留在原处并将克隆添加到具有ng-transclude属性的元素中的同时执行此操作?

Is it possible to do this while keeping the template in place and clone to be appended into the element with ng-transclude attribute?

以下是您可以用来测试解决方案的Plnkr链接: http://plnkr. co/edit/IWd7bnhzpLmlBpoaoJct?p = preview

Here is a Plnkr link you could use to test your solution: http://plnkr.co/edit/IWd7bnhzpLmlBpoaoJct?p=preview

推荐答案

发生这种情况是因为您对元素太过激进了.

That happened to you because you were too aggressive with the element.

您可以执行其他操作，而不是replaceWith，这将...替换当前元素.

You can do different things instead of replaceWith that will... replace the current element.

您可以将其附加到末尾，前置...选择一个模板元素并将其插入...任何DOM操作.例如:

You can append it to the end, prepend it... pick one template element and insert it inside... Any DOM manipulation. For example:

app.directive('test', function() {
  return {
    restrict: 'E',
    scope: {
      name: '@'
    },
    transclude: true,
    template: '<div class="test">This is test</div>',
    link: function(scope, element, attrs, ctrl, transclude) {
      transclude(scope, function(clone) {
        element.append(clone);
      });
    }
  };
});

在这里，我决定将其放在元素之后，以便您可以期望:

Here I decided to put it after the element, so you could expect:

This is test
Hello Matei!
This is test
Hello David!

注意，我没有在模板中包含ng-transclude.不需要，因为您是手工完成的.

Notice I did not included ng-transclude on the template. It is not needed because you're doing that by hand.

所以 TL; DR; :播放元素，而不仅仅是替换它，您可以在需要的位置插入包含html的HTML，只需选择正确的元素，然后调用正确的方法即可.在上面.

So TL;DR;: Play with the element, don't just replace it, you can insert the transcluded html where you want it, just pick the right element, and call the right method on it.

为完整起见，这里是另一个示例: http://plnkr.co/edit/o2gkfxEUbxyD7QAOELT8?p =预览

For the sake of completeness here is another example: http://plnkr.co/edit/o2gkfxEUbxyD7QAOELT8?p=preview

这篇关于是否可以在保留Angular指令范围的同时进行“超越"操作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！