AngularJS如何在模板中包含指令？

Question

我正在尝试使用 AngularJS 中的指令编写一个可重用的组件。我遇到的问题是在我的可重用组件中，在模板中，我想使用 another 指令。然而，这个指令有一个require 属性，它会抛出一个错误，就好像它不符合要求一样，即使它不应该。 Here 是个笨蛋。

错误

找不到指令“inner”所需的控制器“div”！

指令

  directive('inner', function(){
    return {
      require: 'div',
      link: function (scope, elem, attrs){
        console.log('Inner Link');
      }
    }
  }).
  directive('outer', function($timeout){
    return {
      restrict: 'E',
      templateUrl: 'template.html',
      link:  function (scope, elem, attrs, ngModel){
        console.log('Outer Link')
      }
    }
  })

模板

<div>
  <div inner></div>
</div>

编辑

内部元素和 require 应该是 input，而不是 div。

Answer 1

两个错误。

1. require 采用所需的指令名称，而不是您附加的元素 至。
2. outer 需要一个控制器，因为这是 inner 需要的。

Plunker：http://plnkr.co/edit/1epiLV1zjAlXlOodrkO3?p=preview

    angular.module('plunker', []).
      directive('inner', function(){
        return {
          require: '^outer',
          link: function (scope, elem, attrs){
            console.log('Inner Link');
          }
        }
      }).
      directive('outer', function($timeout){
        return {
          restrict: 'E',
          templateUrl: 'template.html',
          link:  function (scope, elem, attrs, ngModel){
            console.log('Outer Link')
          },
          controller: function() {

          }
        }
      });