javascript - ngSelect 元素上具有隔离范围属性的指令，用于预选择选项 : It randomly loses value

Question

看起来像这样。我加载我的页面，我的表单显示获取的值。这些值由 http 服务获取。表单顶部有我的自定义指令(选择框):

        .directive('categorySelectBox', function(){

            return {
                restrict: "A",
                replace: true,
                scope: {
                    // all properties here need to be added to 
                    // the directive in order to be picked up
                    taxonomies: '='
                    ,chosen: '='
                },
                templateUrl: "ngapp/js/tpl/select-box.html"
            };

    })

指令模板:

<select class="form-control" 
    ng-options="option.label for option in taxonomies track by option.value" 
    ng-model="chosen" 
    chosen="chosen" 
    taxonomies="taxonomies">
<option value="">Please select a category</option>

我的 Controller 是这样的:

        .controller('DashboardCtrl', ['$scope', 'DbResourceSrv', function($scope, DbResourceSrv){

            $scope.$watch('cid', function() {
                $scope.formBusy = true;
                $scope.c = DbResourceSrv.getDbResource('response.php', 'company', $scope.cid)
                        .then(function(data) {
                            $scope.c = data;
                            angular.forEach(data, function(value, key) {
                                $scope.c.push({key: value});
                            });
                        });

                $scope.tax = DbResourceSrv.getDbResource('response.php', 'taxonomy', '')
                        .then(function(data) {
                            $scope.taxonomies = [];
                            $scope.chosen = [];
                            angular.forEach(data, function(value, key) {
                                $scope.taxonomies.push({label: value.name, value: value.term_taxonomy_id});
                            });
                            // subtract 1 because $scope.c is 0-based
                            var catId = $scope.c.category - 1;
                            $scope.chosen = $scope.taxonomies[catId];
                            $scope.formBusy = false;
                        });
            });


            $scope.updateCompany = function(cid) {
                var formData = $scope.c;
                $scope.formBusy = true;
                $scope.doCompanyUpdate = DbResourceSrv.updateDbResource('response.php', cid, formData)
                        .then(function(response) {
                            $scope.formBusy = false;
                        });
            };
    }]);

通常我确实会看到我的类别(也是从数据库中获取的，只是在单独的调用中 $scope.tax

现在，我尝试使用 $watch 选择范围属性，但它没有改变任何内容。我还尝试使用指令 Controller 来确保在那里设置 scope.chosen ，但在我看来，即使我使用 promise 加载两个进程 - 当一个进程在另一个进程之前加载时，类别获取会失败因为他们绑得太紧了。

有任何代码改进建议，以便我可以避免看到页面加载时选择的默认请选择类别选项吗？

Answer 1

你是对的:你有两个 promise 不能保证按顺序解决，这是一个问题。在第二个“击败”第一个的情况下，它将无法计算 catId，因为 $scope.c 尚未填充。

$scope.c = DbResourceSrv.getDbResource('response.php', 'company', $scope.cid)
.then(function(data) {
    $scope.c = data; // not guaranteed to be set when it's needed
});

$scope.tax = DbResourceSrv.getDbResource('response.php', 'taxonomy', '')
.then(function(data) {
    var catId = $scope.c.category - 1;
    $scope.chosen = $scope.taxonomies[catId];
});

解决方案是使用 $q.all ，它接受一个 Promise 数组作为参数，并返回另一个 Promise，该 Promise 仅当所有传入的 Promise 解析时才得到解析。

它看起来像这样:

$q.all([$scope.c, $scope.tax]).then(function(results){
    var catId = $scope.c.category - 1;
    $scope.chosen = $scope.taxonomies[catId];
});

Proof of concept demo

您应该能够保留大部分现有的 Promise 回调 - 只需移动依赖于已返回的 AJAX 请求的任何内容即可。