AngularJS UI Modal 和 select 不会更新范围值

Question

我在尝试保存 modal component 中的值时遇到了很多麻烦。在 Angular UI 中可用。

这里是调用模态对话框的页面 Controller

        $scope.sourceSchema = [];
        $scope.targetSchema = [];
        $scope.apiDefinition = [];

        $scope.availableSchemas = availableSchemas.get();

        $scope.addComponent = function (type) {

            $scope.$broadcast('addComponent', [type]);

            var templateUrl = "";
            var controller = null;
            var resolve = null;
            var componentSchema = [];

            switch (type) {
                case "sourceSchema":
                    templateUrl = 'source-schema.tpl.html';
                    controller = 'SourceCtrl';
                    componentSchema = $scope.sourceSchema;
                    break;
                case "targetSchema":
                    templateUrl = 'target-schema.tpl.html';
                    controller = 'TargetCtrl';
                    componentSchema = $scope.targetSchema;
                    break;
                case "api":
                    templateUrl = 'api.tpl.html';
                    controller = 'SourceCtrl';
                    componentSchema = $scope.apiDefinition;
                    break;
            }


            var modalInstance = $modal.open({
                templateUrl: templateUrl,
                controller: controller,
                resolve: {
                    existingSchemas: function () {
                        return $scope.availableSchemas;
                    }
                }
            });

            modalInstance.result.then(function (selectedItem) {
                componentSchema.push(selectedItem);
            }, function () {
//                $log.info('Modal dismissed at: ' + new Date());
            });
        };

这是控制我正在使用的模式对话框之一的 SourceCtrl:

.controller("SourceCtrl", function ($scope, $modalInstance, existingSchemas) {
        $scope.existingSchemas = existingSchemas;
        $scope.sourceSchema = "";

        $scope.ok = function () {
            $modalInstance.close($scope.sourceSchema);
        };

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

        $scope.$watch('sourceSchema', function(newValue, oldValue) {
            console.log(newValue, oldValue);
        })
    })

最后这是该 Controller 的模板 (SourceCtrl)。

<div class="modal-header">
    <h3>New Source Schema</h3>
</div>
<div class="modal-body">
   <div class="row">
       <div class="col-xs-3">
           <label for="schema-source">Source</label>
       </div>
       <div class="col-xs-9">
           <select name="sourceSchema" ng-model="sourceSchema" ng-options="s as s.name for s in existingSchemas">
                <option value="">-- choose source --</option>
           </select>
       </div>

       <h5>Name: {{sourceSchema.name}}</h5>
   </div>
</div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()">OK</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

有趣的是，当我更改选择中的值时，{{sourceSchema.name}}行确实显示了模式的正确名称，但是更改不会反射(reflect)在 Controller 中，实际值是没有被传承。我用 watch 来检测某些内容何时发生变化，但显然没有。但该值确实会发生变化，否则为什么当我在下拉列表中选择它时会显示它。

Answer 1

确保您的 ngModel 表达式中有一个点 - 也就是说 - 您正在绑定(bind)到对象属性而不是直接绑定(bind)到范围。像这样的东西:

.controller("SourceCtrl", function ($scope, $modalInstance, existingSchemas) {
    $scope.existingSchemas = existingSchemas;
    $scope.source = {
      schema: ''
    };

    $scope.ok = function () {
        $modalInstance.close($scope.source.schema);
    };

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

    $scope.$watch('source.schema', function(newValue, oldValue) {
        console.log(newValue, oldValue);
    })
})

然后，在您的标记中:

 <select name="sourceSchema" ng-model="source.schema" ng-options="s as s.name for s in existingSchemas">
            <option value="">-- choose source --</option>
       </select>

如果您可以提供一个插件，我可以帮助您修复代码。