1

In my custom directive, I need to access an the object $scope.$parent.users.

If I console.log $scope.$parent:

pillbox_directives.directive('scheduleCell', function(){
        return {
            restrict: 'EA',
            link: function($scope, element, attrs){
                console.log($scope.$parent);        
            }
        }
    });

...then the desired $parent is logged, and it contains an object 'users' as expected:

$$ChildScope: function b() {this.$$watchers=this.$$nextSibling=this.$$childHead=this.$$childTail=null;this.$$listeners={};this.$$listenerCount={};this.$$watchersCount=0;this.$id=++ob;this.$$ChildScope=null;}
$$childHead: n
$$childTail: n
$$listenerCount: Object
$$listeners: Object
$$nextSibling: null
$$prevSibling: null
$$watchers: Array[4]
$$watchersCount: 0
$id: 2
$parent: n
cloneDrop: function ($index) {
deadDrop: function ($index) {
generateSchedule: function (day) {
logOff: function () {
notSorted: function (obj) {
setup: Array[2]
users: Array[2]
__proto__: n

However, if I console.log($scope.$parent.users), it logs 'undefined'

Any ideas as to why I'm unable to access $scope.$parent.users in this way?

dt801ts
  • 53
  • 1
  • 8
  • 1
    We need more info. It's possible that the `users` array changes after the console log, and when you expand the array in the dev tools you see the newly populated data, but when you console log the `users` directly, then it has no value. Perhaps you're fetching it via an ajax request ? – Omri Aharon Jul 04 '15 at 21:12
  • 1
    Refer [this](http://stackoverflow.com/questions/13318726/easiest-way-to-pass-an-angularjs-scope-variable-from-directive-to-controller) – Rayon Jul 04 '15 at 21:13
  • @OmriAharon The users array is populated from the mongo database w/ $http.get as the page/controller loads. Are you saying that perhaps the array hasn't populated by the time the directive is attempting to log it? – dt801ts Jul 04 '15 at 21:35
  • @RayonDabre I think that link will be useful to me after I get this immediate issue sorted out. However, I'm not seeing how it applies to this problem. Would you mind pointed out to me what I've missed? Thank you – dt801ts Jul 04 '15 at 21:37
  • @dt801ts That's exactly what I'm saying :) – Omri Aharon Jul 04 '15 at 21:37
  • @OmriAharon Okay, that does make sense. I'm attempting to dynamically manipulate the DOM based on analysis of the data in the users array. Should I attempt to delay the directive's searching for this array, or am I simply going about this the wrong way, using a custom directive? Thanks – dt801ts Jul 04 '15 at 21:42
  • A directive sounds right. You should be doing the manipulation after the data is received, and that should be done inside the `then` function. Your `http.get` should be returning a promise, and you chain the `then` function on it. – Omri Aharon Jul 04 '15 at 21:46
  • @OmriAharon To give you some more info, I need to append buttons to various divs in my page. The logic to determine whether or not a button or many buttons is appended depends on a very long if-statement evaluating info in the user objects in users array. Also, the users array data will change depending on client interaction with the page, so the 'button appender' needs to listen for these changes (and it's not currently ng-model). Because the logic is extensive, I decided that a directive would be best. But, I'm having trouble delivering content dynamically this way. – dt801ts Jul 04 '15 at 21:48
  • @OmriAharon Okay, so currently I'm having the controller $http.get the users and from the directive I'm accessing it as $scope.$parent, but instead I should have the directive .get it and, when it successfully retrieves, do the evaluations? – dt801ts Jul 04 '15 at 21:50
  • @OmriAharon But can the directive update the page without refresh, if the data it used to create elements changes with client interaction? – dt801ts Jul 04 '15 at 21:51
  • I need to go now, but I suggest you look into the promise mechanism, it will solve your issue. You can keep your http.get from the controller (it should really be inside a service called from the controller), and you can place an `ng-if="users"` on the directive, and it will ensure that when your directive runs it will have the data. That's just a thought, there are several ways to go about this. If you still having issues after you look in the promise mechanism drop me a comment and I'll take a look in the morning. – Omri Aharon Jul 04 '15 at 21:54
  • @OmriAharon This points me in the right direction, thank you – dt801ts Jul 04 '15 at 21:55

1 Answers1

1

The users array populates with an $http.get call from the controller, and wasn't finished populating by the time the directive attempted to console.log($scope.$parent.users)

The solution was to add ng-if="users" to the directive element in order to ensure that 'users' exists and is loaded before the directive loads.

dt801ts
  • 53
  • 1
  • 8