AngularJS：服务中的修改服务不会更新控制器

我在一个服务中有我的模型，我的所有模型都在一个对象中，我希望能够通过将我的模型重新分配给一个空对象来重置我的模型，但它似乎没有工作，但如果我直接删除一个属性，它会。AngularJS：服务中的修改服务不会更新控制器

如何重置我的模型而不必删除每个属性，刷新页面或做出重大更改？

(function() { 
 
    var myApp = angular.module('myApp', []); 
 
    myApp.controller('MyController', function (MyService) { 
 
     var _this = this; 
 
     _this.model = MyService.model; 
 
     _this.myService = MyService; 
 

 
     _this.deleteInService = function() { 
 
      MyService.functions.resetModel(); 
 
     }; 
 
    }); 
 
    myApp.service('MyService', function() { 
 
     var obj = {}; 
 
     obj.model = {x: 1}; 
 

 
     obj.functions = {}; 
 
     obj.functions.resetModel = function() { 
 

 
      //delete obj.model.x; //THIS WORKS! 
 

 
      obj.model = {x: 1}; //BUT THIS DOESN'T :(
 

 
     }; 
 
     return obj; 
 
    }); 
 
})();

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title></title> 
 
     <meta charset="UTF-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script> 
 
     <script src="changingModelInService.js"></script> 
 
    </head> 
 
    <body ng-app="myApp" ng-controller="MyController as myCtrl"> 
 
     {{myCtrl.model.x}}<div><input ng-model="myCtrl.model.x"/></div> 
 
     <button ng-click="myCtrl.deleteInService()">Delete X in service</button> 
 
    </body> 
 
</html>

谢谢。

编辑：做_this.model = MyService.model因为我有许多控制器

来源

2015-09-02 ilovelamp

我认为一个解决问题的方法是创建像master副本，并使用默认的模型变量分享我的服务是不可能的angular.copy有两个参数在调用该方法时将模型重置为主版本。

请参阅angular.copy文档here。您会注意到现场演示实际上显示了重置功能。

我已更新现场演示plunker，以显示我认为您的愿望http://plnkr.co/edit/BJ...的行为。

希望有帮助！

更新::

一个可能的实现虽然需要测试情况如下;

myApp.service('MyService', function() { 
    var masterModel = {x: 1}; 
    var obj = { 
     model: {x: 1}, 
     functions: { 
     resetModel: function() { 
      angular.copy(masterModel, obj.model); 
     } 
     } 
    }; 
    return obj; 
});

来源

2015-09-02 23:50:40 jh3y

你会怎么做这里面的服务？ – ilovelamp

我已经更新了我的答案，尽管我不是100％，但它可以工作，因此需要一些测试。我认为理论上它应该工作。 – jh3y

是的，虽然它应该是这样的： angular.copy（masterModel，obj.model）; 由于某些原因，这似乎并不适用于标签之间的Ionic（每个标签都有它的视图和控制器）。 – ilovelamp

除了angular.copy，另一种解决方案就是不使用_this.model和使用_this.myService.model代替或更改deleteInService功能

_this.deleteInService = function() { 
     MyService.functions.resetModel(); 
     _this.model = MyService.model; 
    };

你得到这个问题的原因是因为你做这样的事情：

service.model = foo; 
controller.model = service.model; // implies controller.model = foo; 
service.reset(); // => service.model = bar; 
// But notice that controller.model still points to the old object foo

运行下面的代码片断，看看我的意思。

(function() { 
 
    var myApp = angular.module('myApp', []); 
 
    myApp.controller('MyController', function (MyService) { 
 
     var _this = this; 
 
     _this.model = MyService.model; 
 
     _this.serviceModel = MyService.model; 
 
     _this.myService = MyService; 
 

 
     _this.deleteInService = function() { 
 
      MyService.functions.resetModel(); 
 
      _this.serviceModel = MyService.model; 
 
     }; 
 
    }); 
 
    myApp.service('MyService', function() { 
 
     var obj = {}; 
 
     obj.model = {x: 1}; 
 

 
     obj.functions = {}; 
 
     obj.functions.resetModel = function() { 
 

 
      //delete obj.model.x; //THIS WORKS! 
 

 
      obj.model = {x: 1}; //BUT THIS DOESN'T :(
 

 
     }; 
 
     return obj; 
 
    }); 
 
})();

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title></title> 
 
     <meta charset="UTF-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script> 
 
     <script src="changingModelInService.js"></script> 
 
    </head> 
 
    <body ng-app="myApp" ng-controller="MyController as myCtrl"> 
 
     <pre>myCtrl.model = {{myCtrl.model}}</pre> 
 
     <pre>myCtrl.serviceModel = {{myCtrl.serviceModel }}</pre> 
 
     <pre>myCtrl.myService.model = {{myCtrl.myService.model}}</pre> 
 
<div><input ng-model="myCtrl.model.x"/></div> 
 
     <button ng-click="myCtrl.deleteInService()">Delete X in service</button> 
 
    </body> 
 
</html>

来源

2015-09-03 00:13:34 user2718281

谢谢，这很有用。 – ilovelamp

AngularJS：服务中的修改服务不会更新控制器

回答

相关问题