是否可以在 Angular 中保持指令范围的同时“嵌入"? [英] Is it possible to 'transclude' while keeping the scope of the directive in Angular?

问题描述

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

<test name="Matei">你好{{name}}！</test>//我期待你好马泰"<test name="David">你好{{name}}！</test>//我期待你好大卫"

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

app.directive('test', function() {返回 {限制:'E'，范围: {姓名: '@'},替换:真的，转置:真实，模板:'<div class="test" ng-transclude></div>'};});

我也尝试使用 transclude 函数来更改范围并且它有效.唯一的问题是我弄丢了模板.

app.directive('test', function() {返回 {限制:'E'，范围: {姓名: '@'},转置:真实，模板:'<div class="test" ng-transclude></div>',链接:函数(范围，元素，属性，ctrl，transclude){transclude(范围，功能(克隆){element.replaceWith(clone);});}};});

是否可以在保持模板到位并克隆以将其附加到具有 ng-transclude 属性的元素的同时执行此操作?

这里有一个 Plnkr 链接，您可以用来测试您的解决方案:http://plnkr.co/edit/IWd7bnhzpLmlBpoaoJct?p=preview

解决方案

这发生在你身上，因为你对元素过于激进.

你可以做不同的事情来代替 replaceWith 来替换当前元素.

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

app.directive('test', function() {返回 {限制:'E'，范围: {姓名: '@'},转置:真实，模板:'<div class="test">这是测试</div>',链接:函数(范围，元素，属性，ctrl，transclude){transclude(范围，功能(克隆){element.append(克隆);});}};});

这里我决定把它放在元素之后，所以你可以期待:

这是测试你好马泰！这是测试你好大卫！

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

所以TL;DR;:玩转元素，不要只是替换它，你可以在你想要的地方插入被嵌入的html，只要选择正确的元素，并调用正确的方法就可以了.

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

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

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

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

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.

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

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!

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

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.

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

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