how to use outer variable in angularjs directive?

Question

I want to change ng-model(degree) value to id(degree_id) in my template as following

<md-select flex class="md-select-form" ng-model="education.degree" placeholder="Degree" save-id required-param="{{education.degree_id}}">
 <md-option ng-value="degree" ng-repeat="degree in ['High School', 'Associates Degree', 'Bachelor Degree', 'Masters Degree', 'M.B.A', 'M.D', 'Ph.D', 'other']">{{degree}}</md-option>
</md-select>

I have used the directive(save-id) for this parsing in my controller and i have pulled degree service data and binding the relevant id.The code is following

    .directive('saveId', function(Profile){
        return {
            require: 'ngModel',
            scope: {
                requiredParam:'@'
            },        
            link: function(scope, element, attrs, ngModel) {
                console.log("initial loading");
                // view --> model (change to string)            
                ngModel.$parsers.push(function(viewValue){
                    var id = -1;
                    var keepGoing = true;                
                    Profile.getDegreeList().then(function(data) {
                        angular.forEach(data, function(ob){
                            if(keepGoing) {
                                if(ob.degree == viewValue){
                                    id = ob.degree_id;
                                    keepGoing = false;
                                }
                            }
                        });
                        //console.log(id); // it gives updated value
                    });
                    console.log(id); // it gives -1       
                    return id;

                });

            }
        };
    })

I have updated the model value as mentioned above the problem is ,Only the updated value is available within

Profile.getDegreeList(){ }

Out of this function the value is -1 , what's wrong here? Please give me the solutions??

Answer 1

Profile.getDegreeList() returns a promise that is evaluated asynchronously. You register some code that is executed when the promise is resolved. Within this code the id is set. However, the line

console.log(id);

that immediately follows the creation of the promise is executed before the promise is resolved.

If you want to process the id further, or pass it to another function you have to do it within the promise. This means that the line

ngModel.$parsers.push(...) 

has to be pulled into the function that is called when the promise is resolved (i.e. the function passed to then())

Answer 2

It's because your call to Profile.getDegreeList() is asynchronous.

The console.log(id) outside the getDegreeList block is executed immediatelly meaning it logs it's defined value of -1.

The console.log(id) inside the getDegreeList block does work, because at that point the data is loaded.

You should work with promises ($q).

I'm not sure what you're trying to do, but put simply, the following would work: can easily use the option value attribute to assign the id value to drop-down rather than going through directive.

 <select ng-model="education.degree.id" id="degreeList">
    <option 
      value="{{degree.id}}" 
      ng-selected="{{education.degree == degree}}" 
      ng-repeat="degree in degrees">
        {{degree.name}}
    </option>
  </select>

And in your controller (for example)

 .controller("myController", [
  "$scope",
  "$http",
  function($scope, $http){
    var self = {};

    $scope.education = {
      degree: {
        id: -1,
        name: ""
      }
    };

    $scope.degrees = 
    [
      {
        id: 1,
        name: 'High School'
      }, 
      {
        id: 2,
        name: 'Associates Degree'
      }, 
      {
        id: 3,
        name: 'Bachelor Degree'
      }, 
      {
        id: 4,
        name: 'Masters Degree'
      }, 
      {
        id: 5,
        name: 'M.B.A'
      }, 
      {
        id: 6,
        name: 'M.D'
      }, 
      {
        id: 7,
        name: 'Ph.D'
      }, 
      {
        id: 8,
        name: 'other'
      }];
  }]);