Angular - data not available inside ng-init

问题

Angular partial - HTML. BaseCtrl

 <div ng-controller="SelectTagCtrl">       
     <input type="text" ng-init="setTags(viewData['users'])" ui-select2="tagAllOptions" ng-model="tagsSelection" name="users"  />   
     {{viewData['users']}} ECHOES CORRECTLY. 
     But undefined when passed inside ng-init callback.
 </div>

 <input type="text" class="span12" placeholder="Brief Description" name="description" value="{{viewData['description']}}">
 ECHOES CORRECTLY.

Controller.js

function SelectTagCtrl(){
 $scope.setTags = function(data){       
    // data is undfined when viewData['users'] is used. <-- PROBLEM
    // correct when I pass some static string. 
 }     
}


//POPULATING viewData to be used inside view partial.  

function BaseCtrl(){
    $http.get(url).success(function(data){   
    $scope.viewData = data.data || [];        
    $scope.view_type = $scope.viewData['view_type'];
    $scope.fields = data.data.fields;                   
    console.log($scope);

  }).error();
}

回答1:

Using timeout would be a workaround, instead I would take a $scope variable inside the controller to know if the ajax call has completed.

The problem is ng-init might get called before ajax completion.

I already had ui-if directive configured in my angular project, so I used it with the combination of $scope variable to get the things working.

<div ng-controller="SelectTagCtrl" ui-if="ajax_done">       
     <input type="text" ng-init="setTags(viewData['users'])" ui-select2="tagAllOptions" ng-model="tagsSelection" name="users"  />  
</div>

And inside controller,

 $http.get(gurl + '.json').success(function(data,status){
      // some stuff
      $scope.ajax_done = true;
 }).error();

Because of angular's magical two-way binding, the element will get updated. Now it sees that ajax request is completed, ui-if will get a truthy value and ng-init directive of the element will get a chance to execute its callback.

EDIT: ui-if was removed from Angular UI in favour of ng-if which is now built in.

回答2:

Here are two different changes to your fiddle that appear to work.

Fiddle 1 - this version uses $scope.$apply(exp) as described in the documentation here and is useful when you are modifying angular bound data outside of the angular framework. In this example setTimeout is the culprit.

setTimeout(function(){
    console.log("updateVal" );

    $scope.$apply(function() {
        $scope.updateVal2();
    });
    console.log($scope.tagsSelection);
},5000);

Fiddle 2 - this version uses angular's wrapper for setTimeout called the $timeout service.

$timeout(function(){
    console.log("updateVal" );

    $scope.updateVal2();
    console.log($scope.tagsSelection);
},5000);

来源：https://stackoverflow.com/questions/16574025/angular-data-not-available-inside-ng-init

标签

angularjs

angularjs-scope