コントローラーが新しいobjを配列に渡していない

Question

最近私の角でコントローラーを構文として使用しようとしていましたが、どのように動作するのか理解できない問題がありました。だから私は$scopeを使用してthis（すなわち、var vm = this）と対照的に、コントローラ機能のメンバーをバインドするツイートに従っています。このコードは、新しく作成されたブックマークをコントローラで定義されたブックマーク配列に渡すことを想定しています。エラーは私のcreateBookmark（ブックマーク）にあり、index.htmlにどのように角度を設定していますか？なぜ新しいブックマークがブックマーク配列にプッシュされていないのか、頭を悩ますことはできません。私はそれをcreateBookmark（vm.bookmark）として定義しようとしましたが、これは無効な構文です。

なぜこれが間違っているのかを説明していただきたいと思います。

main.controller.js

angular 
    .module('app') 
    .controller('MainController', MainController); 

function MainController() { 
    var vm = this; 

    vm.categories = [ 
     { 'id': 0, 'name': 'Development' }, 
     { 'id': 1, 'name': 'Design' }, 
     { 'id': 2, 'name': 'Exercise' }, 
     { 'id': 3, 'name': 'Humor' } 
    ]; 

    vm.bookmarks = [ 
     { 'id': 0, 'title': 'AngularJS', 'url': 'http://angularjs.org', 'category': 'Development' }, 
     { 'id': 1, 'title': 'Egghead.io', 'url': 'http://egghead.io', 'category': 'Development' }, 
    ]; 

    vm.currentCategory = null; 

    vm.setCurrentCategory = setCurrentCategory; 
    vm.isCurrentCategory = isCurrentCategory; 

    vm.isCreating = false; 
    vm.isEditing = false; 

    vm.startCreating = startCreating; 
    vm.cancelCreating = cancelCreating; 
    vm.startEditing = startEditing; 
    vm.cancelEditing = cancelEditing; 
    vm.shouldShowCreating = shouldShowCreating; 
    vm.shouldShowEditing = shouldShowEditing; 

    function setCurrentCategory(category) { 
     vm.currentCategory = category; 
     vm.cancelCreating(); 
     vm.cancelEditing(); 
    } 

    function isCurrentCategory(category) { 
     return vm.currentCategory !== null && category.name === vm.currentCategory.name; 
    } 

    //--------------------------------------------------------------------------------------------- 
    // CRUD 
    //--------------------------------------------------------------------------------------------- 

    function resetCreateForm() { 
     vm.newBookmark = { 
      title: "", 
      url: "", 
      category: vm.currentCategory 
     }; 
    } 

    function createBookmark(bookmark) { 
     bookmark.id = vm.bookmarks.length; 
     vm.bookmarks.push(bookmark); 

     resetCreateForm(); 
    } 

    vm.createBookmark = createBookmark; 
    //--------------------------------------------------------------------------------------------- 
    // CREATING AND EDITING STATES 
    //--------------------------------------------------------------------------------------------- 

    function startCreating() { 
     vm.isCreating = true; 
     vm.isEditing = false; 

     resetCreateForm(); 
    } 

    function cancelCreating() { 
     vm.isCreating = false; 
    } 

    function shouldShowCreating() { 
     return vm.currentCategory && !vm.isEditing; 
    } 

index.htmlを

<!-- Content: Bookmarks--> 
     <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> 
      <div ng-repeat="bookmark in vm.bookmarks | filter:{category:vm.currentCategory.name}"> 
       <button type="button" class="close">&times;</button> 
       <button type="button" ng-click="vm.startEditing()" class="btn btn-link"><span class="glyphicon glyphicon-pencil"></span> 
      </button> 
       <a href="{{ bookmark.url }}" target="_blank">{{ bookmark.title }}</a> 
      </div> 
      <hr> 

      <!-- Creating --> 
      <div ng-if="vm.shouldShowCreating()"> 

       <button type="button" class="btn btn-link" ng-click="vm.startCreating()"> 
        <span class="glyphicon glyphicon-plus"></span> 
        Create Bookmark 
       </button> 

       <form class="create-form" ng-show="vm.isCreating" role="form" ng-submit="vm.createBookmark(vm.newBookmark)" novalidate> 
        <div class="form-group"> 
         <label for="newBookmarkTitle">Bookmark Title</label> 
         <input type="text" class="form-control" id="newBookmarkTitle" ng-model="vm.newBookmark.title" placeholder="Enter title"> 
        </div> 

        <div class="form-group"> 
         <label for="newBookmarkUrl">Bookmark URL</label> 
         <input type="text" class="form-control" id="newBookmarkURL" ng-model="vm.newBookmark.url" placeholder="Enter URL"> 
        </div> 
        <button type="submit" class="btn btn-info btn-lg">Create</button> 
        <button type="button" class="btn btn-default btn-lg pull-right" ng-click="vm.cancelCreating()">Cancel</button> 
       </form> 

      </div> 

Answer 1

あなたは、単にあなたのvm.createBookmark関数にvm.newBookmarkため参照を渡しています。コントローラを構文として使用するかどうかにかかわらず、新しいオブジェクトをまったく作成していません。

オブジェクトをプッシュする前にクローンを作成してください（resetCreateForm()を介して新しくプッシュされたオブジェクトをリセットしないようにするか、同じオブジェクト参照を配列にプッシュしようとしてください）。

function createBookmark(bookmark) { 
    var copiedBookmark = angular.copy(bookmark); 
    copiedBookmark.id = vm.bookmarks.length; 
    vm.bookmarks.push(copiedBookmark); 

    resetCreateForm(); 
}