在AngularJS中遍历或查询$ scope

Question

I have a nested structure with directives and controllers, and from the leaf of this structure I have to access a scope property of the root controller. I'm doing it in this way:

$scope.$parent.$parent.$parent.property.value.push({ name: "Diego" });

but it's ugly and unreliable. I wonder if there's a better way to do it, maybe querying the scope? I noticed that every $scope has an ID, may it be used to retrieve the scope without traversing the whole structure? Thanks.

Answer 1

I would do this with the help of $broadcast and $on. See the Scope docs

In the directive you would do something like:

$rootScope.$broadcast('directiveName.message', {name: 'Diego'});

And in the controller you would listen for the events like this:

$rootScope.$on('directiveName.message', function(message) {
    console.log(message.name);
});

Answer 2

AngularJS is built around the idea of dependency injection. As such, querying for data outside of your scope is discouraged.

You have several options:

• If you need to access the $rootScope , you can simply ask AngularJS to inject it.

For example, if you use a controller:

myApp.controller('myCtrl', function ($rootScope) {
  // AngularJS will recognize the parameter and populate it
  $rootScope.property.value.push({name: 'Diego'});
});

• If you need access to a controller, you can use a directive controller ( short example I made for a talk ).

For example, you could attach a directive controller to the body and share it with any directive in children:

myApp.directive('body', function () {
  return {
    restrict: 'E',

    controller: function () {
      this.hello = function () { … };
    }
  };
});

myApp.directive('myDir', function () {
  return {
    require: '^body',

    link: function (scope, element, attr, bodyCtrl) {
      bodyCtrl.hello();
    }
  };
});

• Finally, you can also make a singleton service and require it whevener you need it.