ng-model 不更新视图

Question

我到处都进行了彻底的搜索，但似乎找不到解决问题的方法。 我正在尝试制作一个表格来填写，以便在网站上的项目上创建新的任务对象，例如 scrum backlog 或 Angular 和 angular-ui 中的东西。

在将团队成员添加到任务时，我将 Angular-UI 用于预先输入功能，以便在项目弹出窗口中显示可用的成员。我见过有类似问题的人，但似乎没有什么能解决我的问题。下面是 HTML 和控制器。抱歉，标记很长，但我怀疑它必须与嵌套控制器和混合范围有关，所以我将所有相关内容都包括在内。

<div ng-controller="SubmitCreateTaskController">
<div class="modal fade" id="taskModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">New Task</h4>
            </div>
            <div class="modal-body">           
                <form role="form" method="post" name="create-task">
                    <div class="form-group">
                        <label for="taskname">Task Name</label>
                        <input type="text" class="form-control" id="taskname" ng-model="taskForm.taskName" placeholder="Task Name">
                    </div>

                    <div class="form-group">
                        <label for="taskdesc">Description</label>
                        <textarea class="form-control" id="taskdesc" size="3" ng-model="taskForm.taskDescription" placeholder="Enter a short description here..." rows="2"></textarea>
                    </div>

                    <div class="form-group">
                        <label for="assigneddate">Assigned Date</label>
                        <input type="text" class="form-control" id="assigneddate" ng-model="taskForm.assignedDate">
                    </div>

                    <div ng-controller="TypeAheadController">
                        <div class="form-group">
                            <label for="contributors">Add Contributors</label>
                            <input id="contributors" type="text" class="form-control" ng-model="contrib.selected" typeahead="member for member in contrib.stream_members | filter:$viewValue"
                            typeahead-editable="false" typeahead-on-select="contrib.onSelect($item)">
                        </div>

                        <div class="form-group">
                            <label for="users">Contributors:</label>

                            <textarea class="form-control" disabled="disabled" id="users" ng-model="contrib.entered" rows="1"></textarea>

                        </div>
                    </div>

                    <div class="form-group">
                        <label for="taskcomments">Comments</label>
                        <textarea class="form-control" id="taskcomments" ng-model="taskForm.comment" placeholder="Comments" rows="2"></textarea>
                    </div>

                    <div class="modal-footer">

                        <button type="submit" class="btn btn-primary" ng-click="taskForm.submit()">Add Task</button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                    </div>  

                </form>      
            </div>
        </div>
    </div>
</div>

控制器：

.controller('SubmitCreateTaskController', ['$scope', '$http', function($scope, $http) {
$scope.taskForm = {};
$scope.taskForm.taskName = '';
$scope.taskForm.taskDescription = '';
$scope.taskForm.assignedDate = new Date();
$scope.taskForm.contributors = [];
$scope.taskForm.comment = '';

$scope.taskForm.submit = function(item, event) {
    var formData = {name: $scope.taskForm.taskName,
                    description: $scope.taskForm.taskDescription,
                    status: 'open',
                    assigned: $scope.taskForm.assignedDate,
                    completed: null,
                    contributors: $scope.taskForm.contributors,
                    comments: [{body: $scope.taskForm.comment,
                                user: 'RACHE User',
                                date: new Date()
                                }]
                    };

    var postURL = '../create_task/' + $scope.stream_name;

    $http.post(postURL, formData)
    .success(function(){
        taskForm = {}; // empty the form of previous input values
        alert('New Task Created for ' + $scope.stream_name);
    })
    .error(function(res) {
        alert(res.data);
    });
};
}])
.controller('TypeAheadController', ['$scope', '$http', function($scope, $http) {
$scope.contrib = {};
$scope.contrib.selected = '';
$scope.contrib.stream_members = undefined;
$scope.contrib.entered = [];

$http.get('/stream_members/' + $scope.stream_name)
.then(function(res) {
    $scope.contrib.stream_members = res.data.stream_members;
});

$scope.contrib.onSelect = function($item) {

    $scope.contrib.selected = '';

    $scope.contrib.entered.push($item);
    console.log($scope.contrib.entered);
};

最后一点是“TypeAheadController”中的重要部分。我正在尝试将弹出的团队成员添加到正下方的文本区域，稍后将发送到数据库。这就是为什么我将实际的typeahead输入框绑定到'contrib.select'，将“display/post”框绑定到'contrib.entered'，这样添加一个成员后可以继续搜索，搜索框被清除，选中成员添加到下面的框中，可以开始新的搜索。在标记中，我调用 typeahead-on-select 回调中的最后一个 (onSelect) 函数。这样我就可以清除输入框，并且可以轻松添加另一个成员，而无需手动删除。在此函数中，输入的成员应附加到绑定到“显示/发布”框下方的数组中。发生这种情况，因为控制台日志显示良好的价值，搜索/输入字段被清除，所以函数也被调用。

但是，视图不会随着绑定到显示框的更新数组而更新。我已经尝试了一切。我搜索了一下，发现这里需要使用点表示法，因为 Angular 无法使用原语进行更新，但这也无济于事。

一切正常，逻辑良好，打印出来的值也很好，弹出窗口正常工作并按预期清除，但它下面的该死的文本区域没有更新。

有什么建议吗？我已经坚持了将近一天，对此我感到非常沮丧。我会非常感谢任何帮助！ 提前谢谢大家！

Answer 1

Textarea 确实使用 value 属性，您的代码无法正常工作，因为 contrib.输入的不在标签之间，而是因为您无法将 textarea 绑定到数组（它需要绑定到字符串）。

看看这个plunker，如果你在你的html中这样做：

<textarea class="form-control" disabled="disabled" id="users" rows="1" ng-model="contrib.enteredString"></textarea>

并在你的 typeahead 控制器的末尾添加这一行：

 $scope.contrib.enteredString = $scope.contrib.entered.toString();

然后文本区域将更新

Answer 2

Textareas 不使用 ng-value，因为它们的值包含在标签中。移除 ng-model 并将值放在标签之间。

  <textarea class="form-control" disabled="disabled" id="users" rows="1">{{contrib.entered}}</textarea>