通过赋值运算符分配对象的引用

时间:2017-06-24 22:45:44

标签: angularjs angularjs-scope

我对以下计划有疑问。在控制器中,saveContact函数:如果我将行ContactService.save($scope.newcontact);更改为$scope.contacts.push($scope.newcontact);

似乎该程序的工作原理相同。我想知道原因是当这一行($scope.contacts = ContactService.list();被执行时,服务中联系人列表的引用被分配给$scope.contacts,以便推送到$scope.contacts的新联系人是相同的将新联系人推送到服务中的联系人列表?

<div ng-app="app" ng-controller="ContactController">
    <form class="well">
        <label>Name</label>
        <input type="text" name="name" ng-model="newcontact.name" />
        <label>Email</label>
        <input type="text" name="email" ng-model="newcontact.email" />
        <label>Phone</label>
        <input type="text" name="phone" ng-model="newcontact.phone" />
        <br/>
        <input type="hidden" ng-model="newcontact.id" />
        <input type="button" value="Save" ng-click="saveContact()" class="btn btn-primary" />
    </form>
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="contact in contacts">
                <td>{{ contact.name }}</td>
                <td>{{ contact.email }}</td>
                <td>{{ contact.phone }}</td>
                <td> <a href="javascript:void(0)" ng-click="edit(contact.id)">edit</a> | <a href="javascript:void(0)" ng-click="delete(contact.id)">delete</a>

                </td>
            </tr>
        </tbody>
    </table>
</div>
var module = angular.module('app', []);

module.service('ContactService', function () {
    //to create unique contact id
    var uid = 1;

    //contacts array to hold list of all contacts
    var contacts = [{
        id: 0,
        'name': 'Viral',
            'email': 'hello@gmail.com',
            'phone': '123-2343-44'
    }];

    //save method create a new contact if not already exists
    //else update the existing object
    this.save = function (contact) {
        if (contact.id == null) {
            //if this is new contact, add it in contacts array
            contact.id = uid++;
            contacts.push(contact);
        } else {
            //for existing contact, find this contact using id
            //and update it.
            for (i in contacts) {
                if (contacts[i].id == contact.id) {
                    contacts[i] = contact;
                }
            }
        }

    }

    //simply search contacts list for given id
    //and returns the contact object if found
    this.get = function (id) {
        for (i in contacts) {
            if (contacts[i].id == id) {
                return contacts[i];
            }
        }

    }

    //iterate through contacts list and delete 
    //contact if found
    this.delete = function (id) {
        for (i in contacts) {
            if (contacts[i].id == id) {
                contacts.splice(i, 1);
            }
        }
    }

    //simply returns the contacts list
    this.list = function () {
        return contacts;
    }
});

module.controller('ContactController', function ($scope, ContactService) {

    $scope.contacts = ContactService.list();

    $scope.saveContact = function () {
        //ContactService.save($scope.newcontact);
        $scope.contacts.push($scope.newcontact); ----change here
        $scope.newcontact = {};
    }


    $scope.delete = function (id) {

        ContactService.delete(id);
        if ($scope.newcontact.id == id) $scope.newcontact = {};
    }


    $scope.edit = function (id) {
        $scope.newcontact = angular.copy(ContactService.get(id));
    }
})

链接到the original program.

1 个答案:

答案 0 :(得分:1)

它不太一样。 $scope.contacts指向的数组和ContactsService 内部使用的数组是同一个数组,但是ContactsService正在save中工作是通过直接推送到$scope.contacts

具体来说,如果您要添加的联系人是联系人(没有ID的联系人),则会为其添加ID。此外,save将更新现有联系人。

您的更改似乎有效,因为您要将联系人添加到ContactsService内部数组,但是您绕过了ContactsService指定的API。

您的方法可以最终复制列表中的联系人,并且不加选择地添加它们。