如何在 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.The 代码如下

    .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() returns 异步评估的承诺。您注册了一些在解决承诺时执行的代码。在此代码中设置了 id。但是，行

console.log(id);

在 promise 被 resolved 之前执行创建 promise 后立即执行。

如果您想进一步处理 id，或将其传递给另一个函数，您必须在 promise 内进行。这意味着行

ngModel.$parsers.push(...)

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

Answer 2

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

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

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

您应该使用 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 指令中使用外部变量？

how to use outer variable in angularjs directive?

angularjs

angularjs-directive

angularjs-service

angularjs-scope

angularjs-ng-model