[英]How can I delete a property from an object in Angular using diectives?
I make a two directive's .On one directive I have delete button.and second directive I get a object value form shared service .Now I want to delete that value from delete button ,I try to empty my object but it is not taking place why ..?我做了一个两个指令。在一个指令上我有删除按钮。第二个指令我从共享服务中得到一个对象值。现在我想从删除按钮中删除那个值,我尝试清空我的对象,但它没有发生为什么..? if i am doing wrong what is best way to do this task ?
如果我做错了,完成这项任务的最佳方法是什么?
plunker http://plnkr.co/edit/Yenmira9J9XpjscQzRoX?p=preview plunker http://plnkr.co/edit/Yenmira9J9XpjscQzRoX?p=preview
code代码
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="app">
<a></a>
<b></b>
<script>
angular.module('app',[]).directive('a',function(){
return {
restrict :'E',
scope:{},
templateUrl:'a.html',
controller:'ts',
controllerAs:'vm'
}
}).controller('ts',function(sharedService){
var vm=this;
vm.delete=function(){
alert('--');
sharedService.deletepro();
}
}).directive('b',function(){
return {
restrict :'E',
scope:{},
templateUrl:'b.html',
controller:'bb',
controllerAs:'vm'
}
}).controller('bb',function(sharedService){
var pm=this;
pm.message= sharedService.sendData();
}).service('sharedService',function(){
var vm =this
vm.data={};
vm.sendData=sendData;
vm.deletepro=deletepro;
function deletepro(){
vm.data={};
}
function sendData(){
var obj ={name:"pQr"};
vm.data=obj;
return vm.data;
}
})
</script>
</body>
</html>
I try to delete like that but not work我尝试像那样删除但不起作用
vm.delete=function(){
alert('--');
sharedService.deletepro();
}
Update answer provide not working更新答案提供不起作用
updated plinker更新 plinker
http://plnkr.co/edit/Yenmira9J9XpjscQzRoX?p=preview http://plnkr.co/edit/Yenmira9J9XpjscQzRoX?p=preview
You are using the .service recipe, which creates a constructor, but what you want to use is the .factory recipe, which creates a singleton.您正在使用 .service 配方,它创建一个构造函数,但您想要使用的是 .factory 配方,它创建一个单例。
.factory('sharedService', function() {
var data = {};
function deletepro(){
data = {};
}
function sendData(){
var obj = {name:"pQr"};
data = obj;
return data;
}
return {
sendData: sendData,
deletepro: deletepro
};
});
This way, both of your controllers will load the same instance of your shared service.这样,您的两个控制器都将加载共享服务的相同实例。
UPDATE更新
After reviewing your code on the plnkr provided in your comment, I found a few more errors in your code.在您的评论中提供的 plnkr 上查看您的代码后,我发现您的代码中还有一些错误。
pm
instead of vm
)pm
而不是vm
)中提到的,您的一个控制器中有一个错字sharedService.sendData()
to vm.message
, but that did not bind the two values in any way.sharedService.sendData()
的返回值分配给vm.message
,但这并没有以任何方式绑定这两个值。 In the second case, you were expecting the value of vm.message
to update when you made a change to the data in sharedService
, but because there was no binding, that was not happening.在第二种情况下,你的价值期待
vm.message
来更新,当您进行了更改数据sharedService
,但因为没有约束力,也没有发生。
To resolve it, I added a link function to your directive and used the following code to watch sharedService.getData
and update vm.message
whenever it changed:为了解决这个问题,我在您的指令中添加了一个链接函数,并使用以下代码监视
sharedService.getData
并在更改时更新vm.message
:
scope.$watch(sharedService.getData, function(data) {
vm.message = data;
}
Here is a working version: http://plnkr.co/edit/kd7aEgNdQnTuMlwcTeDE?p=preview这是一个工作版本: http : //plnkr.co/edit/kd7aEgNdQnTuMlwcTeDE?p=preview
First: You have a mistake in the second directive, you declare controllerAs: 'vm'
but in the controller you have a distinct scope variable name: var pm = this;
第一:你在第二个指令中有一个错误,你声明了
controllerAs: 'vm'
但在控制器中你有一个不同的范围变量名称: var pm = this;
To delete a property you cant try:要删除您无法尝试的属性:
delete myObject[property];
where property is a string.其中 property 是一个字符串。
Happy coding!快乐编码!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.