Question

在模态的“ok”函数中，我试图从打开模态的范围更新变量。此

$scope.modalOptions.assets.length = 0;

完美有效：“父”范围内的变量“资产”立即发生变化，而当模态仍处于打开状态时，“资产”的数据重新定位会在主页面中更新和清空。

让我烦恼的是将上面改为

$scope.modalOptions.assets = $scope.modalOptions.assetFactory.query();

完全没有效果。我可以验证API控制器是否被调用，并且它返回新数据，这实际上也应该改变“资产”的表示。

变量本身在控制器中定义如下：

$scope.assets = bondFactory.query();

我将它传递给Modal-Service，如下所示：

assets: $scope.assets

我会感谢您的提示和想法..

修改

如何调用模态：

    $scope.postModal = function () {
    //Pass view
    var customModalDefaults = {
        templateUrl: 'scripts/app/views/postBond.html'
    }
    //Pass data
    var customModalOptions = {
        asset: angular.copy($scope.asset),
        assets: $scope.assets,
        currencies: globalVariables.currencies,
        assetFactory: bondFactory,
        validationErrors: [],
        action: 'POST'
    };
    //Show & Callback
    ModalAssetService.showModal(customModalDefaults, customModalOptions).then(function (result) {
        // fill me with usefull content
    });
};

模态服务本身：

app.service('ModalAssetService', ['$modal',
function ($modal) {

    var modalDefaults = {};
    var modalOptions = {};

    this.showModal = function (customModalDefaults, customModalOptions) {

        //Create temp objects to work with since we're in a singleton service
        var tempModalDefaults = {};
        var tempModalOptions = {};

        //Map angular-ui modal custom defaults to modal defaults defined in service
        angular.extend(tempModalDefaults, modalDefaults, customModalDefaults);

        //Map modal.html $scope custom properties to defaults defined in service
        angular.extend(tempModalOptions, modalOptions, customModalOptions);

        //Create controller
        tempModalDefaults.controller = function ($scope, $modalInstance, $resource, errorService) {

            $scope.modalOptions = tempModalOptions;

            // exit modal with "ok"
            $scope.modalOptions.ok = function (result) {

                //POST
                if ($scope.modalOptions.action == 'POST') {
                    // try and post asset
                    $scope.modalOptions.assetFactory.save($scope.modalOptions.asset, function () {
                        // success
                        $scope.modalOptions.assetFactory.query({}, function (data) {
                            $scope.modalOptions.assets = data;
                            // $modalInstance.close();
                        });                            
                    }, function (error) {
                        // error
                        $scope.modalOptions.validationErrors = errorService.fn(error);
                    });
                };

                //PUT
                if ($scope.modalOptions.action == 'PUT') {
                    //TODO
                    alert("put");
                };

            };
            // exit modal with "cancel"
            $scope.modalOptions.close = function (result) {
                $modalInstance.dismiss('cancel');
            };
        }
        return $modal.open(tempModalDefaults).result;
    };
}

]）;

编辑2 ：bondFactory

app.factory('bondFactory', ['$resource', function ($resource) {
return $resource('../api/bond/:id', null, {
    'update': { method: 'PUT' }
})

}]）;

解如果更改是由于将$ resource GET分配给来自所述范围的变量，我仍然没有弄清楚如何解决范围未被通知有关更改的问题。

无论如何，对于我的具体情况，我找到了一个更好的解决方案：当在模态中单击“确定”时，新资产将被发送到API。如果在那里发生错误（验证失败等），Modal将保持打开状态，并且一些通知将通知用户。如果新资产成功发布，则会向API发送新的GET，并且只将最后一个新资产添加到现有的资产元素数组中。这意味着没有“闪烁”，只有一行被添加到资产列表中。

假设GET-Request中的最后一个元素绝对是新资产并不是一种好的编程形式，当然只需要最后一个就足以检索所有资产的完整列表时会有一些开销。，但我想它的确有效，我只是在API中添加一些，以确保它始终处于正确的顺序。代码：

$scope.modalOptions.assetFactory.save($scope.modalOptions.asset, function () {
    //success
    $scope.modalOptions.assetFactory.query({}, function (result) {
        $scope.modalOptions.assets.push(result[result.length - 1]);
        $modalInstance.close();
    });
}, function (error) {
    //error
    $scope.modalOptions.validationErrors = errorService.fn(error);
});

Answer 1

您的工厂正在执行异步操作，因此您需要使用回调来访问数据并让视图更新：

$scope.modalOptions.assetFactory.query({}, function(data) {
    $scope.modalOptions.assets = data;
});

Answer 2

在不知道你如何调用模态的情况下，或者如果你使用的是手动滚动模式或来自UI-Bootstrap的模式，我只能猜测事情的运作方式。话虽如此，如果你没有使用UI-Bootstrap中的模态，你真的应该这样做。它使用promises并且能够从模态中返回任何内容。

$scope.myModalPromise = $modal.open(modalConfig);
$scope.myModalPromise.result.then(function(data){
     //things to do upon closing the modal with $close
     //data is any value or object that you want to pass back
}, function(data){
     //things to do upon closing the modal with $dismiss
     //data is any value or object that you want to pass back
});

设置允许您的模态执行异步操作，并仅在完成后返回值。它的美妙之处在于它们以一种Angular的方式干净利落地返回到呼叫控制器。

从服务中更改控制器变量

2 个答案: