作为语法的控制器没有将新的obj传递给数组

Question

所以我最近一直试图在我的angular中使用Controller作为语法，但我认为我可能无法理解它的工作原理。因此，我遵循一个tut，它使用$scope来绑定控制器函数的成员，而不是this（即var vm=this）。假设代码将新创建的书签传递给控制器中定义的书签数组。错误出现在我的createBookmark（书签）中，以及我如何在index.html中设置angular。我只是不明白为什么它没有将新书签推送到书签数组中。我尝试将其定义为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.newBookmark的引用传递到vm.createBookmark函数中。您根本没有创建新对象（无论是否使用控制器作为语法）。

您应该在推送对象之前克隆该对象，这样就不会重置新推送的对象（通过resetCreateForm()）或试图将相同的对象引用推送到您的数组中。

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