AngularJS：通過模塊化窗口傳遞數據

Question

我試圖在刪除記錄時顯示Flash消息。我無法獲得通知顯示，儘管如果在從服務器獲得響應後使用console.log，我會得到正確的響應。

查看：

<p ng-show="offerDeletedSuccess" class="someClass"> 
    Some notice 
</p> 

通用控制器：

$scope.offerDeletedSuccess = false; 

$scope.open = function(offer) { 
    var modalInstance = $modal.open({ 
     animation: true, 
     templateUrl: 'myModalContent.html', 
     controller: 'ModalInstanceCtrl', 
     resolve: { 
      offerDeletedSuccess: function() { 
       return $scope.offerDeletedSuccess; 
      } 
     } 
    }); 

    modalInstance.result.then(function (selectedItem) { 
     $scope.selected = selectedItem; 
    }); 
}; 

模態實例控制器：

angular 
    .module('someModule') 
    .controller('ModalInstanceCtrl', function ($http, $scope, $modalInstance, offerDeletedSuccess) { 

    $scope.ok = function() { 
     console.log(offerDeletedSuccess); // this returns false 

     $http.post('/api/offers/delete/' + offer.id). 
     success(function(data) { 
      offerDeletedSuccess = true; 
      console.log(offerDeletedSuccess); // this returns true, expression in html stays false 
     }). 
     error(function() { 
      console.log('API error - config.') 
     }); 

     $modalInstance.close(); 
    }; 

    $scope.cancel = function() { 
     $modalInstance.dismiss('cancel'); 
    }; 
}); 

Answer 1

這個快速解決方案是使用$broadcast。您必須將$rootScope注入ModalInstanceCtrl。當數據準備好，ModalInstanceCtrl將播出名爲dataGet事件：

controller('ModalInstanceCtrl', function ($http, $scope, $modalInstance, $rootScope, offerDeletedSuccess) { 
    $http.post('/api/offers/delete/' + offer.id). 
    success(function(data) { 
     offerDeletedSuccess = true; 
     $rootScope.$broadcast('dataGet', offerDeletedSuccess); 
    }). 
} 

我們可以處理一般的控制器事件：

$scope.$on('dataGet', function(value){ 
    //The value here is offerDeletedSuccess in ModalInstanceCtrl 
     $scope.offerDeletedSuccess = value; 
});