简体   繁体   English

如何使用语音从 Angular 中的对象中删除属性?

[英]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 上查看您的代码后,我发现您的代码中还有一些错误。

  • You had a typo in one of your controllers, as mentioned in another answer ( pm instead of vm )正如另一个答案( pm而不是vm )中提到的,您的一个控制器中有一个错字
  • You were assigning the return value of 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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM