0

在我的角度应用程序中，我有一个具有隔离范围的指令。该指令在其作用域中获取一个字符串参数，并且由于该值可能由父作用域在异步过程中初始化 - 它还获得一个由父作用域在值准备好使用时解析的承诺。

奇怪的事情：当承诺被解决时，指令范围内的值仍然是未定义的，尽管在父控制器中它有一个值。

请参阅此 plunker，了解我的体验示例： https ://plnkr.co/edit/WLILKaO95xWwU2RF29oX?p=​​preview

在控制器中：

  $scope.defer = $q.defer();

  // to simulate an async operation
  $timeout(function(){
     $scope.ctrlValue = 'Hi';  
     $scope.defer.resolve();
  });

在指令中：

 scope.valuePromise.then(function(){      
     alert(scope.value);
 });

重要说明：如果我将“alert”代码行包装在 $timeout 块中 - scope.value 具有正确的值。解决承诺后，似乎 Angular 没有运行摘要。

有任何想法吗？

4

1 回答 1

1

$timeout在指令中使用。将父范围的更改应用到指令范围需要一些时间。您尝试在未更新时获取该值。

var app = angular.module('app', []);

app.controller('ctrl', function($scope, $q, $timeout) {
  $scope.defer = $q.defer();
  
  $timeout(function() {
    $scope.ctrlValue = 'Hi';
    $scope.defer.resolve();
  });
});

app.directive('dir', function($timeout){
  return {
    restrict: 'E',
    scope: {
      value: '=',
      valuePromise: '='    
    },
    link: function(scope) {
      scope.valuePromise.then(function() {
        $timeout(function() {
          alert(scope.value);        
        });
      });
    }
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
    
    <div ng-controller="ctrl">
    
      <h1>Hello Plunker!</h1>
      <dir value="ctrlValue" value-promise="defer.promise"></dir>
    </div>
  </div>

于 2016-03-07T09:25:33.607 回答