There is a pattern:

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

How to get data from root-dir in menu-dir? There is no data parameter in the console.

 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 answers 2

    In this case, the directives are independent, and the second directive $rootScope is $rootScope

    You can connect, for example, using ng-transculde and referring to the direct parent.

     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>

    Or use the opportunity to use controllers for communication

     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>

      You need to create a new scop in the parent directive

       angular.module('Test') .directive('rootDir', function () { return { scope: true,// <--- вот тут restrict: 'E', controller: function ($scope) { $scope.data = [ 'main', 'about' ]; } } })
      • In the code in question, a new Osprey is also created. - Grundy