Директива не получает контроллер родительской директивы

0

Это приложение должно использовать console.log-контроллер "первой" директивы, почему этого не происходит? Я почти уверен, что это может работать нормально. "вторая" директива получает шаблон с "третьим" от attrs и добавляет его. Третья директива требует "сначала".

<!DOCTYPE html>
<html>

  <head>
    <script data-require="[email protected]" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp">
    <div first>123</div>
  </body>

</html>

angular.module('myApp', [])
  .directive('first', function() {
    return {
      restrict: 'A',
      link: postLink,
      template: '<div second="<div third></div>"></div>',
      controller: function() {}
    };

    function postLink(scope, element, attrs) {}
  })
  .directive('second', function($compile) {
    return {
      restrict: 'A',
      link: postLink
    };

    function postLink(scope, element, attrs) {
      var link = $compile(attrs.second);

      element
        .empty()
        .append(link(scope));
    }
  })  
  .directive('third', function() {
    return {
      restrict: 'A',
      require: '?^first',
      link: postLink,
      template: '<h1>Third</h1>'
    };

    function postLink(scope, element, attrs, FirstCtrl) {
      console.log(FirstCtrl);
    }
  })    
  • 0
    где находится FirstCtrl?
  • 0
    function postLink (scope, element, attrs, FirstCtrl) {console.log (FirstCtrl);}
Теги:
controller
directive

2 ответа

0

Проблема в том, что вы компилируете свой элемент перед добавлением его к его родительскому элементу, поэтому во время компиляции у элемента нет родителя и, очевидно, нет родительских контроллеров.

Вам нужно скомпилировать дочерний элемент только после добавления его к родительскому элементу.

var child = angular.element(attrs.second)
element.empty().append(child);
$compile(child)(scope);

http://plnkr.co/edit/A1sZKQVrWDCsWaraiSNI?p=preview

  • 0
    Спасибо, все отлично работает.
0

Вам нужно написать функциональность в части контроллера директивы

.directive('first', function() {
    return {
      restrict: 'A',
      link: postLink,
      template: '<div second="<div third></div>"></div>',
      controller: function() {
        console.log('write functionality here');
      }
    };
  • 0
    Не могли бы вы предоставить рабочий поршень?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню