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

Question

我试图使用AngularJS中的指令编写可重用的组件。我遇到的问题是，在我的可重用组件中，在模板中，我想使用另一个指令。但是，该指令具有require属性，并且它会抛出错误，就好像它不符合要求即使它不应该也是如此。 Here是一名掠夺者。

错误

  无法找到指令＆＃39;内部＆＃39;所需的控制器＆＃39; 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不是div，而应该是input。

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() {

          }
        }
      });