Ng-модель не обновляет вид

Question

Я искал всюду повсюду и не могу найти решение моей проблемы. Я пытаюсь создать форму для заполнения, чтобы создать новый объект задачи в проектах на веб-сайте, например, в виде отставания в схватке или что-то в Angular и angular-ui.

Я использую Angular-UI для функций typeahead, когда вы добавляете членов команды к задаче, поэтому доступные члены во всплывающем окне проекта. Я видел парней с похожими проблемами, но ничего, кажется, не решает это для меня. Ниже приведен 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». Я пытаюсь добавить всплывающих членов команды в текстовое поле, чуть ниже которого позже будет отправлено в БД. Вот почему я привязал фактическое поле ввода типа к разделу «contrib.select» и «display/post» к «contrib.entered», поэтому поиск можно продолжить после добавления одного члена, окно поиска будет очищено, выбрано член добавляется в поле ниже, может начинаться новый поиск. В разметке я вызываю последнюю функцию (onSelect) в обратном вызове typeahead-on-select. Это позволяет очистить поле ввода, а другой элемент можно легко добавить без удаления вручную. В этой функции введенный элемент должен быть добавлен к массиву, который привязан к окну «показывать/отправлять». Это происходит, поскольку журнал консоли показывает хорошее значение, поле поиска/ввода очищается, поэтому функция также вызывается.

Этот вид не обновляется с обновленным массивом, связанным с полем отображения. Я пробовал ВСЕ. Я искал googled и нашел здесь, что точечную нотацию нужно использовать, поскольку Angular не может обновлять примитивы, но это тоже не помогло.

Все работает отлично, логика хорошая, ценности хороши, когда я распечатываю их, всплывающие окна работают и очищаются, как ожидалось, но чертовски текстовая область под ним не обновляется.

Любые предложения? Я застрял на этом почти целый день, и я действительно разочарован этим. Я всегда был бы очень полезен для любой помощи! Спасибо, ребята!

Answer 1

Текстуры не используют значение ng, поскольку их значение содержится в теге. Удалите ng-модель и поместите значение между тегами.

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