解決承諾時角度摘要未運行

Question

在我的角度應用程序中，我有一個隔離範圍指令。該指令在其作用域中獲取一個字符串參數，並且由於此值可能由異步過程中的父作用域初始化 - 它也會得到一個承諾，當該值準備好使用時，該承諾將由父代解決。

奇怪的是：當promise被解析時，指令作用域中的值仍然未定義，儘管在父控制器中它有一個值。

請參閱本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具有正確的值。當承諾解決時，角度似乎沒有運行摘要。

任何想法？

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