7

我正在尝试将 2 个模板注入一个元素并对其进行操作：

<div
  ic-first="foo"
  ic-second="bar"
  ic-third="baz"
  ic-fourth="qux"
>
</div>

icFirst应该通过模板注入一个空 div 作为其元素的子元素。icSecond应该注入第二个 div（带有一堆内容）作为其元素的第二个子元素，因此生成的 html 如下所示：

<div
  ic-first="foo"  // priority: 100
  ic-second="bar" // priority: 50
  ic-third="baz"  // priority: 0
  ic-fourth="qux" // priority: 0
>
  <div id="foo"></div>
  <div> <!-- a bunch of stuff from the templateUrl --> </div>
</div>

icFirst和icSecond都会将其他元素注入到新创建的容器中。

当我在两个指令上指定指令模板属性时，我得到一个错误：

错误：多个指令 [icFirst, icSecond] 要求模板：<div ic-first...</p>

当我添加transclude: true到这两个指令时，icFirst执行得很好……但是同一元素上的其他指令不会执行。当我设置transclude: 'element'时，其他指令会执行，但我收到一个错误，即第一个子 ( $scope.firstObj) 未定义。

所有四个指令都需要访问彼此的范围，所以我在它们的控制器中完成了大部分工作：

app.directive('icFirst', ['ic.config', function (icConfig) {
  return {
    restrict: 'A',
    priority: 100,
    template: '<div id="{{firstId}}"></div>',
    replace: false,
    transclude: 'element',
    controller: function icFirst($scope, $element, $attrs) {
      // …
      $scope.firstId = $scope.opts.fooId;
      $scope.firstElm = $element.children()[0];
      $scope.firstObj = {}; // this is used by the other 3 directives 
    },
    link: function(scope, elm, attrs) { … } // <- event binding
  }
);
app.directive('icSecond', ['ic.config', function (icConfig) {
  return {
    restrict: 'A',
    priority: 0,
    templateUrl: 'views/foo.html',
    replace: false,
    transclude: 'element',
    controller: function icSecond($scope, $element, $attrs) {
      // …
      $scope.secondElm = $element.children()[1];
      $scope.secondObj = new Bar( $scope.firstObj );
      // ^ is used by the remaining 2 directives & requires obj from icFirst
    },
    link: function(scope, elm, attrs) { … } // <- event binding
  }
);

请注意，我已更正 的行为replace: false以匹配记录的行为，如拉取请求#2433中所述。

我尝试$scope.firstObj在控制器中实例化，并将其设置在 linkFn 中（希望在 linkFn 执行时嵌入已经完成），但我遇到了同样的问题。看来 first-child 实际上是一个评论。

4

1 回答 1

2

我能想出解释抛出此错误的唯一原因是 AngularJS 团队试图避免不必要的覆盖/DOM 操作：

考虑到实际行为replace: false与记录的行为，我认为实际行为实际上是预期的行为。如果这是真的，那么允许在同一个元素上使用多个模板/templateUrls 将导致后续模板覆盖以前的模板。

由于我已经修改了源代码以匹配记录的行为，因此作为快速修复†</sup>，我再次修改了源代码（/src/ng/compile.js:700）以删除assertNoDuplicate检查（对应于angular.js:4624）。现在我返回以下 2 个对象，它可以工作，而且我找不到任何负面影响：

// directive icFirst
return {
  restrict: 'A',
  priority: 100,
  replace: false,
  template: '<div id="{{firstId}}"></div>',
  require: ["icFirst"],
  controller: Controller,
  link: postLink
};
// directive icSecond
return {
  restrict: 'A',
  require: ['icFirst'],
  replace: false,
  templateUrl: 'views/bar.html',
  priority: 50,
  controller: Controller,
  link: postLink
};

†</sup> 如果设为永久，则检查应该是
if (directive.templateUrl && directive.replace)
（对于directive.template 类似）

于 2013-04-19T00:56:49.553 回答