Question

我有这个简单的例子......

代码：

angular
      .module('app', [])
      .directive('parentDirective', parentDirective)
      .directive('childDirective', childDirective);

    function parentDirective() {
      return {
        restrict: 'E',
        scope: true,
        //template: 'My job is {{job}}', 
        controller: function($scope) {
          $scope.job = 'trashman';
          $scope.say = function(job) {
            $scope.job = job;
            alert($scope.job);
          }
        }
      };
    }

    function childDirective() {
      return {
        restrict: 'E',
        link: function(scope) {
          scope.say('shoe shine boy');
        }
      };
    }

标记：

    <parent-directive>
        <child-directive></child-directive>
    </parent-directive>

这可以按预期工作。我遇到的问题是理解为什么我不能将模板添加到parentDirective并获得相同的结果。如果取消对模板属性的注释，则绑定不会更改，并且不再触发警报。有人可以简单地向我解释这里发生了什么吗？也许帮助充实我的榜样？我通过例子学习：）

Answer 1

您可以在父级上设置模板属性，在模板内部使用子指令。它理想情况下应该自动呈现。

类似的东西：

角 .module（＆＃39; app＆＃39;，[]） .directive（＆＃39; parentDirective＆＃39;，parentDirective） .directive（＆＃39; childDirective＆＃39;，childDirective）;

function parentDirective() {
  return {
    restrict: 'E',
    scope: true,
    template: '<div>{{job}} is seen<child-directive></child-directive></div>'
    //template: 'My job is {{job}}', 
    controller: function($scope) {
      $scope.job = 'trashman';
      $scope.say = function(job) {
        $scope.job = job;
        alert($scope.job);
      }
    }
  };
}

function childDirective() {
  return {
    restrict: 'E',
    template: '<div>I will be renderred</div>',
    link: function(scope) {
      scope.say('shoe shine boy');
    }
  };
}

现在你可以在任何地方使用父指令，它也会在其中呈现child指令。

类似的东西：

<parent-directive></parent-directive>

Angular现在会看到这样，父指令找到，渲染它，里面是一个使用的子指令，渲染孩子的html。

Answer 2

当您使用指令模板时，它会将指令内部内容替换为模板，并且很可能是因为内部指令永远不会呈现。

您需要在父模板中使用ng-transclude在父指令模板中发出子指令html。在您的指令定义对象标记

transclude: true,

和

template: '<div> My job is {{job}} <ng-transclude></ng-transclude></div>'

这来自$compile文档

替换指令元素的内容（默认）。

替换指令的元素本身（如果replace为true - DEPRECATED）。

包装指令元素的内容（如果transclude为true）。

Angular：带有父指令和子指令的模板

2 个答案: