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

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() 的调用是异步的。

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

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

您应该使用promises ($q)。

我不确定您要做什么，但简而言之，以下方法会起作用： 可以很方便地使用option value 属性将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'
      }];
  }]);

Answer 2

Profile.getDegreeList() 返回一个异步评估的承诺。您注册了一些在 promise 解决时执行的代码。在此代码中设置了 id。但是，这条线

console.log(id);

在 promise 创建之后立即执行，在 promise 被解决之前执行。

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

ngModel.$parsers.push(...) 

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