角 - 不受歡迎的行爲 - 新永久對象綁定到模板元素

Question

我有正是如此實現控制器的小角度項目：

concernsApp.factory('ConcernService', function ($http, $q) { 
var api_url = "http://localhost:8000/api/"; 

var ConcernService = { 

    ... 

    save: function (url, obj) { 
     console.log(obj) 
     var defer = $q.defer(); 
     $http({method: 'POST', 
      url: api_url + url, 
      data: obj}). 
      success(function (data, status, headers, config) { 
       defer.resolve(data); 
      }).error(function (data, status, headers, config) { 
       defer.reject(status); 
      }); 
     return defer.promise; 
     }, 
    }; 
    return ConcernService; 
}); 


concernsApp.controller('ProjectsCtrl', function ($scope, $http, ConcernService) { 

    ... 

    $scope.createProject = function(new_project) { 
     ConcernService.save('projects/', new_project).then(function(){ 
      $scope.projects.push(new_project); 
     }); 
    }; 

HTML模板：

<div ng-controller="ProjectsCtrl" ng-init="getProjects(); getTasks(); new_project = {};"> 
    <div class="row col-lg-8"> 
     <h2>Projects</h2> 
     <input type="text" ng-model="search_projects" class="form-control" style="width:300px; margin: 30px 0px"> 

     <table class="table table-bordered col-lg-8" ng-repeat="project in projects | orderBy: 'id' | limitTo: 10 | filter:search_projects"> 
     <tr> 
      <td class="col-lg-4"> 
       <h3>{{ project.id }}</h3> 
       <h4>{{ project.title }}</h4> 
      </td> 
      <td class="col-lg-2"> 
       <a href="#" ng-click="deleteProject(project)">Delete Project</a> 
      </td> 
     </tr> 
     </table> 
    </div> 
    <div class="row"> 
    <div class="col-lg-8"> 
     <h2>Create a New Project</h2> 
     <form class="form-horizontal"> 
     <div class="control-group"> 
      <label class="control-label" for="id_title">Title</label> 
      <div class="controls"> 
       <input type="text" id="title" class="form-control" placeholder="Title" ng-model="new_project.title"> 
      </div> 
      </div> 
     </form> 
     <br /> 
     <button class="btn btn-success" ng-click="createProject(new_project)">create</button> 
    </div> 
    </div> 
</div> 

因此，在全成提交API，代碼將new_project對象推送到$scopes.projects，這很好。但是，當我開始在創建項目標題輸入字段中輸入內容時，它似乎與前一個新項目綁定，並且該項目的標題開始動態變化。

這也明顯阻止了任何進一步的新項目對象的創建。我對Angular很陌生，我不確定這裏發生了什麼或者如何解決它。細菌，我想繼續創造新的項目，並推動他們陣列。

任何幫助非常讚賞。

Answer 1

您正在將new_project = {}設置爲ng-init，只有當該指令放入DOM時纔會發生這種情況。

在createProject功能，您可以將其恢復到{}做出新new_project。

$scope.createProject = function(new_project) { 
    ConcernService.save('projects/', new_project).then(function(){ 
     $scope.projects.push(new_project); 
     $scope.new_project = {}; 
    }); 
}; 

作爲旁註，我會將new_project = {}的定義也移到控制器中。

作爲角一般禪：

治療範圍爲在模板只讀和作爲只寫在控制器中。