AngularJS:通过模块化窗口传递数据

时间:2015-07-20 16:20:57

标签: angularjs

我正在尝试删除记录时显示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');
    };
});

1 个答案:

答案 0 :(得分: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;
});