AngularJS UI模态和选择不会更新范围值

Question

我在尝试从Angular UI中可用的模态组件中保存值时遇到了很多麻烦。

这是调用模态对话框的页面控制器

        $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);
        })
    })

最后这里是这个控制器的模板（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>

有趣的是，当我更改select中的值时，{{sourceSchema.name}}行确实显示了模式的正确名称，但更改未反映在控制器中且实际值未传递上。 我用手表来检测什么东西变了，显然它没有。 但是值确实会改变，否则当我在下拉列表中选择它时，为什么会显示它。

Answer 1

确保你的ngModel表达式中有一个点 - 也就是说 - 你绑定到一个对象属性而不是直接绑定到作用域。 就像是：

.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>

如果你能提供一个plunker我可以帮你修复代码。