AngularJS transclude但保留指令的适用范围 [英] AngularJS transclude but keep the directive's scope

问题描述

是可能的角度做到这一点？如果

Is possible to do this in Angular? If

<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 属性？

下面是一个Plnkr链接，你可以用它来测试您的解决方案：的http：// plnkr.co/edit/IWd7bnhzpLmlBpoaoJct?p=$p$pview

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.

您可以将其追加到年底，prePEND它...选择一个模板元素，里面插入...任何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; ：与元素玩，不只是取代它，你可以插入你想要它，只是选择合适的元素transcluded 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 /编辑/ o2gkfxEUbxyD7QAOELT8？p = preVIEW

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

这篇关于AngularJS transclude但保留指令的适用范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！