Question

我正在使用Angular UI bootstrap来创建模态

我有这个模板

<div class="modal-body">
Topic <input type="text" ng-model="topic" />
<div id="topic-error" class="field-validation-error" ng-show="error" ng-bind="error">

</div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()" ng-disabled="!topic">OK</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</div>

然后这是模态控制器

app.controller('AddTopicCtrl', ['$scope', '$modalInstance','$http',
 function ($scope, $modalInstance,$http) {

     $scope.topic = 'initial';
     $scope.error = "";
     $scope.ok = function () {

         $http.post("/api/topics/post", { name: $scope.topic })
             .success(function(result) {
                 if (result.Status == "Ok") {

                     $modalInstance.close(result.Data.Topic);
                 } else {
                     $scope.error = result.Data.Message;
                 }

         });

     };

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

 }
]);

问题是当我在文本框中输入值时，$ scope.topic不会更新。它显示了模型的初始值，但它仅作为单向绑定（模型 - ＆gt;视图）。其他一切都正常。

是否有我遗忘的内容或是否存在ng-model指令的限制？

Answer 1

AngularUI Bootstrap $ modal服务正在为其模态窗口创建一个转换范围。这意味着您的控制器和模板之间还有一个范围。这就是为什么你需要使用ng-model表达式中的“着名点”，例如：

在控制器中：

$scope.topic = {value: 'initial'};

并在模板中：

<input type="text" ng-model="topic.value" />

输入更改时不更新角度模型

1 个答案: