admin管理员组

文章数量:1300165

I have a controller that makes an xhr request to retrieve some data..

$scope.mbProductImages = [];

$http.get('product.json').success(function(data) {
    $scope.productDetails = data;
        
    $scope.mbProductImages = $scope['productDetails']['product_images'];
    console.log($scope.mbProductImages);

        for(key in $scope.mbProductImages){
            if ($scope.mbProductImages[key].current == true) {
                $scope.currentImage = $scope.mbProductImages[key]['img_lg'];
            }
        }  
});

What I really need is for a directive to retrieve data from $scope.productDetails (via attribute values) loaded in the controller and I need this code in the controller or link function of the directive instead of the $parent controller...

    $scope.mbProductImages = $scope[$attrs.content][$attrs.object];
    console.log($scope.mbProductImages);

        for(key in $scope.mbProductImages){
            if ($scope.mbProductImages[key].current == true) {
                $scope.currentImage = $scope.mbProductImages[key]['img_lg'];
            }
        }

where $scope[$attrs.content][$attrs.object]; in the directive is equivalent to $scope.productDetails from controller...

So my controller should have only this in it:

    $http.get('product.json').success(function(data) {
        $scope.productDetails = data;
    }

and my directive's controller would have the other code.

PROBLEM

My plunker:

What happens is,, the parent controller xhr request which fetches the data takes longer than it takes the directive to load so I get left with $scope.mbProductImages undefined

How can I make the directive wait for data from controller to load OR check for when it loaded from the directive and then apply the value?

Update

With great help from @Chandermani I have been able to see my error and e to a great solution.

Controller:

app.controller('MainCtrl', function($scope, $http) {
  $http.get('mydata.json').success(function(data) {
    $scope.productDetails = data;
    console.log($scope.productDetails);
  });

});

Directive:

app.directive("myImages", function() {
return {
restrict: "E",
scope: true,
templateUrl: "template.html",
pile: function(element, attrs) {
  return function(scope, element, attrs) {
    scope.myContent = attrs.content;
    scope.myObject = attrs.object;
    scope.$watch(scope.myContent,function(newValue,oldValue){
      if(newValue) {
        scope.mbProductImages = newValue[scope.myObject];
        console.log(scope.mbProductImages);
        for(key in scope.mbProductImages){
         if (scope.mbProductImages[key].current == true) {
            scope.currentImage = scope.mbProductImages[key]['img_lg'];
         }
        } 
      }
    })
  }; // return

} // pile
}
});

I have a controller that makes an xhr request to retrieve some data..

$scope.mbProductImages = [];

$http.get('product.json').success(function(data) {
    $scope.productDetails = data;
        
    $scope.mbProductImages = $scope['productDetails']['product_images'];
    console.log($scope.mbProductImages);

        for(key in $scope.mbProductImages){
            if ($scope.mbProductImages[key].current == true) {
                $scope.currentImage = $scope.mbProductImages[key]['img_lg'];
            }
        }  
});

What I really need is for a directive to retrieve data from $scope.productDetails (via attribute values) loaded in the controller and I need this code in the controller or link function of the directive instead of the $parent controller...

    $scope.mbProductImages = $scope[$attrs.content][$attrs.object];
    console.log($scope.mbProductImages);

        for(key in $scope.mbProductImages){
            if ($scope.mbProductImages[key].current == true) {
                $scope.currentImage = $scope.mbProductImages[key]['img_lg'];
            }
        }

where $scope[$attrs.content][$attrs.object]; in the directive is equivalent to $scope.productDetails from controller...

So my controller should have only this in it:

    $http.get('product.json').success(function(data) {
        $scope.productDetails = data;
    }

and my directive's controller would have the other code.

PROBLEM

My plunker: http://plnkr.co/edit/xErYnlj04P5LQsMedVWi?p=preview

What happens is,, the parent controller xhr request which fetches the data takes longer than it takes the directive to load so I get left with $scope.mbProductImages undefined

How can I make the directive wait for data from controller to load OR check for when it loaded from the directive and then apply the value?

Update

With great help from @Chandermani I have been able to see my error and e to a great solution.

Controller:

app.controller('MainCtrl', function($scope, $http) {
  $http.get('mydata.json').success(function(data) {
    $scope.productDetails = data;
    console.log($scope.productDetails);
  });

});

Directive:

app.directive("myImages", function() {
return {
restrict: "E",
scope: true,
templateUrl: "template.html",
pile: function(element, attrs) {
  return function(scope, element, attrs) {
    scope.myContent = attrs.content;
    scope.myObject = attrs.object;
    scope.$watch(scope.myContent,function(newValue,oldValue){
      if(newValue) {
        scope.mbProductImages = newValue[scope.myObject];
        console.log(scope.mbProductImages);
        for(key in scope.mbProductImages){
         if (scope.mbProductImages[key].current == true) {
            scope.currentImage = scope.mbProductImages[key]['img_lg'];
         }
        } 
      }
    })
  }; // return

} // pile
}
});

• javascript
• ajax
• angularjs
• angularjs-directive
• angularjs-scope

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Mar 4, 2014 at 1:31 GRowingGRowing 4,7271313 gold badges5555 silver badges7575 bronze badges 5

• please set up a plnkr.co. in general, one way is: <div my-directive="value"> where value is the value that you want to pass to the directive. if it changes use scope.$wait. – akonsu Commented Mar 4, 2014 at 1:33
• $scope.$broadcast, and $scope.$on should do the trick. – Zack Argyle Commented Mar 4, 2014 at 1:42
• I am having a hard time setting up the plunker because i have to upload a bunch of images to set the example.. I ma working on it. The result in the code is intermittently loading,, – GRowing Commented Mar 4, 2014 at 1:53
• you can use public images from, say, wikipedia. – akonsu Commented Mar 4, 2014 at 2:10
• here is the plunker that reproduces the problem I seem to have plnkr.co/edit/xErYnlj04P5LQsMedVWi?p=preview – GRowing Commented Mar 4, 2014 at 4:46

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

You don't make directive to wait, but watch of changes to a scope variable using scope.$watch.

Your watch expression should point to the property that you want to watch. Something like

$scope.$watch($attrs.content + $attrs.object, function(newValue,oldValue) {
   if(newValue) {
          //your logic here
   }
});

The first parameter of watch should be path to the property of the object you want to watch.

Update: I have tried to fix your plunkr see if helps http://plnkr.co/edit/fKJ2nZcytKubC9JjiaTS?p=preview I have basically put a watch on productDetails property.

If you don't want to use $watch you can use ng-model to pass data into your directive. In this case your directive could look like this:

app.directive('myDirective',function(){
        restrict: 'E',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModel){

        //called when controller change ngModel value
        ngModel.$render = function(){
            console.log('ngModel has changed');

            //reading data from ngModel         
            scope.currentModelValue = ngModel.$modelValue;  
            processData()               
        }           

        function processData(){
            //process your data
            scope.currentModelValue = "new value";
            updateModel();
        }

        function updateModel(){
            //updating data
            ngModel.$setViewValue(scope.currentModelValue)
        }
    }
});

HTML:

<my-directive ng-model="yourData"></my-directive>

本文标签： javascriptAngularjsDirective controller loading faster than app controllervalue undefinedStack Overflow