Question

我想在我的模板中将ng-model（degree）值更改为id（degree_id），如下所示

<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>

我在我的控制器中使用了指令（ save-id ）进行此解析，我已经提取了学位服务数据并绑定了相关的ID。代码如下：

    .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;

                });

            }
        };
    })

我已经更新了上面提到的模型值，问题是，

中只有更新后的值

Profile.getDegreeList（）{ }

这个函数的值是-1，这里有什么问题？请给我解决方案??

Answer 1

Profile.getDegreeList（）返回异步计算的promise。您注册了解决承诺时执行的一些代码。在此代码中，id已设置。但是，行

console.log(id);

在承诺解决之前执行承诺创建之后的

。

如果你想进一步处理id，或者将它传递给另一个函数，你必须在promise中进行。这意味着该行

ngModel.$parsers.push(...)

必须将

拉入到解析promise时调用的函数（即函数传递给then()）

Answer 2

这是因为您对Profile.getDegreeList()的调用是异步的。

console.log(id)块之外的getDegreeList立即执行，这意味着它将其定义的值记录为-1。

console.log(id)块内的getDegreeList确实有效，因为此时数据已加载。

您应该使用promises（$ q）。

我不确定你要做什么，但简单地说，以下方法可行：可以轻松使用选项值属性将id值分配给下拉菜单，而不是通过指令。

 <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>

在你的控制器中（例如）

 .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'
      }];
  }]);

如何在angularjs指令中使用外部变量？

2 个答案: