Question

是否可以从$scope.contacts功能中删除service()个对象？

var module = angular.module('app', []);
module.service('ContactService', function() {
  //contacts array to hold list of all contacts
  this.delete = function(item) {
    console.log(item);
    var confirmDelete = confirm("Do you really need to delete " + item.name + " ?");
    if (confirmDelete) {
      var curIndex = $scope.contacts.indexOf(item);
      $scope.contacts.splice(curIndex, 1);
    }
  }
});
module.controller('ContactController', function($scope, ContactService) {
  $scope.contacts = [{
    id: 0,
    'name': 'Viral',
    'email': 'hello@gmail.com',
    'phone': '123-2343-44'
  }];
  $scope.delete = function(id) {
    ContactService.delete(id);
    if ($scope.newcontact.id == id) $scope.newcontact = {};
  }
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ContactController" class="container">
  <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)">delete</a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

这没有意义，因为服务是一个单独的（每个应用程序存在一个），而你可以有多个控制器。如果服务可以获得范围，它如何知道它是正确的！

您可以通过将$scope传递给删除功能来完成此工作，例如

this.delete = function($scope, item)

和

ContactService.delete($scope, id)

Answer 2

简短回答：不，你不能。

答案很长：不，你不能，因为范围与控制器相关联，控制器又与视图相关联，而服务与视图无关（因此它们的名称; - ））。

因此，简而言之：从服务中访问作用域是不可能的，因为该服务负责多个视图（和范围）。你永远不会知道使用哪个范围，因为对于一个服务，没有＆＃34;环境＆＃34;或者＆＃34;当前＆＃34;范围。

如果您确实想直接访问范围，请将其移交给服务（按照answer Andy Newman中的建议）。但是我不推荐这个，因为那时服务会对它不应该知道的东西起作用。

更好的方法是考虑消息传递，以便该服务让所有感兴趣的各方（即控制器）知道在其范围内做些什么。

可能最好的选择不是将数据保存在控制器中，而是将数据放入服务中，以便服务人员负责处理数据并在适当时删除它们。然后，控制器只需要告诉服务该做什么。

Answer 3

您不必发送$ scope。只需发送联系人数组：

＆＃13;

var module = angular.module('app', []);
module.service('ContactService', function () {
//contacts array to hold list of all contacts
this.delete  = function (contacts, item) {
	var confirmDelete = confirm("Do you really need to delete " + item.name + " ?");
	if (!confirmDelete) {
		return;
	}

	var curIndex = contacts.indexOf(item);
	contacts.splice(curIndex, 1);
};
});
module.controller('ContactController', function ($scope, ContactService) {
$scope.contacts = [{
		id : 0,
		'name' : 'Viral',
		'email' : 'hello@gmail.com',
		'phone' : '123-2343-44'
	}
];
$scope.delete  = function (item) {
	var id = item.id;
	ContactService.delete ($scope.contacts, item);
	if ($scope.newcontact.id == id)
		$scope.newcontact = {};
}
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ContactController" class="container">
  <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)">delete</a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

Answer 4

我认为向服务添加$scope不是Angular方式。

让服务管理您的数据更好（正如Golo的回答中提到的那样）。然后，您还可以执行$http请求以保持模型/数据同步。与你的后端。

请查看下面的演示或此fiddle。

＆＃13;

angular.module('app', [])
    .factory('contactService', function () {
        
    //contacts array to hold list of all contacts
    var service = {
        contacts: [{
            id: 0,
                'name': 'Viral',
                'email': 'hello@gmail.com',
                'phone': '123-2343-44'
        }, {
            id: 1,
                'name': 'John',
                'email': 'hello@gmail.com',
                'phone': '123-2343-44'
        }, {
            id: 2,
                'name': 'Jane',
                'email': 'hello@gmail.com',
                'phone': '123-2343-44'
        }],
        
        delete: function (item) {
            console.log(item);
            var itemIndex;
            var confirmDelete = confirm("Do you really need to delete " + item.name + " ?");
            if (confirmDelete) {
                angular.forEach(this.contacts, function(contact, index) {
                    if(item.id === contact.id) {
                        itemIndex = index;
                    }
                });

                this.contacts.splice(itemIndex, 1);
            }
        }
    };
    return service;
})
    .controller('contactController', function ($scope, contactService) {
    $scope.contacts = contactService.contacts;

    $scope.delete = function (contact) {
        contactService.delete(contact);
        //if ($scope.newcontact.id == id) $scope.newcontact = {};
    }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="contactController">
    <ul>
        <li ng-repeat="contact in contacts">{{contact.name}}
            <button ng-click="delete(contact)">remove</button>
        </li>
    </ul>
</div>

＆＃13;

如何从服务中删除$ scope对象

4 个答案: