Question

可以在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>

我的指示很简单，但它不起作用：

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

我还尝试使用transclude函数来更改范围，它可以正常工作。唯一的问题是我放松了模板。

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=preview

Answer 1

发生在你身上的原因是因为你对元素过于咄咄逼人。

您可以执行不同的操作，而不是replaceWith来替换当前元素。

你可以将它追加到最后，添加它...选择一个模板元素并将其插入...任何DOM操作。例如：

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

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

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

注意我没有在模板中包含ng-transclude。这不是必需的，因为您手动执行此操作。

所以 TL; DR; ：与元素一起玩，不要只替换它，你可以在你想要的地方插入被转换的html，只需选择正确的元素，然后调用正确的方法。

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

是否有可能转移＆＃39;同时在Angular中保留指令的范围？

1 个答案: