0

Есть шаблон:

<div ng-app='Test'>
  <root-dir>
    <menu-dir></menu-dir>
  </root-dir>
</div>

Как получить данные из root-dir в menu-dir ? В консоли нету параметра data

angular.module('Test', []);

angular.module('Test')
  .directive('rootDir', function () {
    return {
      scope: {},
      restrict: 'E',
      controller: function ($scope) {
        $scope.data = [
          'main',
          'about'
        ];
      }
    }
})
  .directive('menuDir', function () {
  return {
    scope: false,
    controller: function($scope) {
      console.log($scope);
    }
  }
});

2 ответа 2

1

В данном случае директивы независимы, и скоп второй директивы - это $rootScope

Связать можно например используя ng-transculde и обращаясь к прямому родителю.

angular.module('Test', []);

angular.module('Test')
  .directive('rootDir', function() {
    return {
      scope: {},
      template: '<div ng-transclude></div>',
      restrict: 'E',
      transclude: true,
      controller: function($scope) {
        $scope.data = [
          'main',
          'about'
        ];
      }
    }
  })
  .directive('menuDir', function($rootScope) {
    return {
      template: '<div>{{$parent.data|json}}</div>',
      controller: function($scope) {}
    }
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<div ng-app='Test'>
  <root-dir>
    <menu-dir></menu-dir>
  </root-dir>
</div>

Либо воспользоваться возможностью использовать контроллеры для связи

angular.module('Test', []);

angular.module('Test')
  .directive('rootDir', function() {
    return {
      scope: {},
      restrict: 'E',
      controller: function() {
        this.data = [
          'main',
          'about'
        ];
      },
      controllerAs: 'root'
    }
  })
  .directive('menuDir', function($rootScope) {
    return {
      require: '^rootDir',
      template: '<div>{{data|json}}</div>',
      controller: function($scope) {
        console.log($scope);
      },
      controllerAs: 'menu',
      link: function(scope, el, attrs, rootController) {
        scope.data = rootController.data;
      }
    }
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<div ng-app='Test'>
  <root-dir>
    <menu-dir></menu-dir>
  </root-dir>
</div>

0

Нужно создать новый скоуп в родительской директиве

angular.module('Test')
  .directive('rootDir', function () {
    return {
      scope: true,// <--- вот тут
      restrict: 'E',
      controller: function ($scope) {
        $scope.data = [
          'main',
          'about'
        ];
      }
    }
})
1
  • в коде в вопросе, так же создается новый скоп.
    – Grundy
    1 авг 2016 в 13:12

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.