javascript - Angular : template with a parent and child directive

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 并获得相同的结果。如果取消注释模板属性，绑定(bind)不会更改，并且不再触发警报。有人可以向我简要解释一下这里发生了什么吗？也许可以帮助充实我的例子？我通过例子学习:)

Answer 1

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

类似于:

Angular .module('应用程序', []) .directive('parentDirective',parentDirective) .directive('childDirective', 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');
    }
  };
}

现在您可以在任何地方使用父指令，它也会在其中渲染子指令。

类似于:

<parent-directive></parent-directive>

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