Question

我制作了两个指令。在一个指令中我有删除按钮。第二个指令我得到一个对象值表单共享服务。现在我想从删除按钮中删除该值，我试着清空我的对象，但它没有发生为什么..？如果我做错了什么是做这项任务的最佳方法？

plunker http://plnkr.co/edit/Yenmira9J9XpjscQzRoX?p=preview

码

<!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>

我尝试删除那样但不能正常工作

vm.delete=function(){
          alert('--');
          sharedService.deletepro();
        }

更新答案提供无效

更新了plinker

http://plnkr.co/edit/Yenmira9J9XpjscQzRoX?p=preview

Answer 1

您正在使用.service配方，它创建一个构造函数，但您想要使用的是.factory配方，它创建一个单例。

 function extend<T, U>(target: T, source: U): T & U;
 function extend<T, U, V>(target: T, source1: U, source2: V): T & U & V;
 function extend<T, U, V, W>(target: T, source1: U, source2: V, source3: W): T & U & V & W;
 function extend(target: any, ...sources: any[]): any {
    //implementation
 }

这样，两个控制器都将加载共享服务的同一个实例。

<强>更新

在评论中提供的plnkr上查看代码后，我在代码中发现了一些错误。

您在其中一个控制器中输入了拼写错误，如另一个答案（.factory('sharedService', function() { var data = {}; function deletepro(){ data = {}; } function sendData(){ var obj = {name:"pQr"}; data = obj; return data; } return { sendData: sendData, deletepro: deletepro }; });而非pm）中所述
您将vm的返回值分配给sharedService.sendData()，但这并未以任何方式绑定这两个值。

在第二种情况下，当您对vm.message中的数据进行更改时，您期望vm.message的值更新，但由于没有绑定，因此没有发生。

要解决此问题，我在您的指令中添加了一个链接功能，并使用以下代码观看sharedService并在更改时更新sharedService.getData：

vm.message

以下是工作版本：http://plnkr.co/edit/kd7aEgNdQnTuMlwcTeDE?p=preview

Answer 2

首先：你在第二个指令中有错误，你声明controllerAs: 'vm'但是在控制器中你有一个不同的范围变量名：var pm = this;

要删除您无法尝试的属性：

delete myObject[property];

其中property是一个字符串。

快乐的编码！

如何使用diectives从Angular中的对象中删除属性？

2 个答案: