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

尝试从Angular UI中的modal component中保存值时遇到很多麻烦。

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

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

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

最佳答案

确保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>

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