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

Question

我正在嘗試使用AngularJS中的指令編寫可重用的組件。 我遇到的問題是在模板的可重用組件內部，我想使用另一個指令。 但是，此指令具有require屬性，即使沒有通過要求，它也會引發錯誤，好像它未能通過要求一樣。 這是一個矮人。

錯誤

找不到指令“內部”所需的控制器“ 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>

編輯

而不是div用於內部元素和require，應該input 。

Answer 1

兩個錯誤。

1. require使用必需的指令名稱，而不是您附加到其的元素。
2. outer需要一個控制器，因為那是inner需要的。

柱塞： 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() {

          }
        }
      });