Question

将简单程序作为输入共享，以便通过自定义服务在其他服务中进行更新。我正在编写一些代码，但需要帮助才能让它适用于两个控制器。有人可以帮忙吗？

片段：

<html>

<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> 
</head> 

<body ng-app="myApp"> 

<div class="div1" ng-controller="myCtrl1"> 
    <input type="text" ng-model="name"> <span>{{name}}</span>
</div> 

<div class="div2" ng-controller="myCtrl2"> 
    <span>{{name}}</span> 
</div> 

<script> 
//app declaration
var app = angular.module("myApp",[]);

//controllers declaration
app.controller('myCtrl1',function($scope, dummyService){
    $scope.name = "Peter";
});

app.controller('myCtrl2',function($scope, dummyService){
    $scope.name = "Roger";
});

//service declaration
app.service('dummyService',function(){
    this.name = "Martin";
});

</script> 

</body> 

</html>

需要量：

我一开始在输入框中输入文字。必须立即开始在两个跨度中更新相同的内容（即div1和div2中）。

Answer 1

您还没有使用$scope变量绑定服务变量，但这不会解决问题。

问题是，您正在使用原始类型变量，每次更改该对象的引用时，您都会为变量赋值。您可以通过将其更改为引用类型对象来轻松解决此问题。通过绑定对象引用，您可以确保只要对象属性发生更改，它就会更改它指向的基础对象的副本。同样在这里，我们将服务model变量与scope model对象一起指向，以确保它们保持同步。

<强>标记

<body ng-app="myApp">

  <div class="div1" ng-controller="myCtrl1">
    <input type="text" ng-model="model.name"> <span>{{name}}</span>
  </div>

  <div class="div2" ng-controller="myCtrl2">
    <span>{{model.name}}</span>
  </div>

</body>

<强>代码

app.controller('myCtrl1', function($scope, dummyService) {
  $scope.model = dummyService.model;
});

app.controller('myCtrl2', function($scope, dummyService) {
  $scope.model = dummyService.model;
});

//service declaration
app.service('dummyService', function() {
  this.model = {
    name: "Martin"
  };
});

Demo

您可以使用primitive类型实现相同的功能，并使用您的问题。但同样的，你必须写getter＆amp; setter设置变量值。您可以将服务更改为以下

app.service('dummyService', function() {
  var self = this;
  var name = "Martin"; //private variable

  self.setName = function(name) {
    name = name;
  }
  self.getName = function() {
    return name;
  }
});

Plunkr Here

Answer 2

var app = angular.module("myApp",[]);

//controllers declaration
app.controller('myCtrl1',function($scope, dummyService, $rootScope){
    $scope.name = "Peter";
    $scope.change = function() {
      $rootScope.$emit('changeName',{name:$scope.name});
    }
});

app.controller('myCtrl2',function($scope, dummyService, $rootScope){
    $scope.name = "Roger";
    $rootScope.$on('changeName', function(event,data) {
      $scope.name = data.name;
    })
});

//service declaration
app.service('dummyService',function(){
    this.name = "Martin";
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp"> 

<div class="div1" ng-controller="myCtrl1"> 
    <input type="text" ng-model="name" ng-change="change()"> <span>{{name}}</span>
</div> 

<div class="div2" ng-controller="myCtrl2"> 
    <span>{{name}}</span> 
</div> 
 
</body>

Answer 3

您可以通过方法参考来实现此目的。考虑到，您需要使用不同的值初始化两个名称变量。否则，您只需使用服务变量。（$ scope.name = dummyService.name）

＆＃13;

var app = angular.module("myApp",[]);

//controllers declaration
app.controller('myCtrl1',function($scope, dummyService, $rootScope){
    $scope.name = "Peter";
    $scope.change = function() {
      dummyService.setName($scope.name);
    }
    
    
});

app.controller('myCtrl2',function($scope, dummyService, $rootScope){
    $scope.name = "Roger";
    $scope.change = function(name) {
      $scope.name =  name;
    }
    $scope.init = function() {
      dummyService.set($scope.change);
    }
    $scope.init();
});

//service declaration
app.service('dummyService',function(){
    this.name = "Martin";
    this.set = function(method) {
      this.setName = method;
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp"> 

<div class="div1" ng-controller="myCtrl1"> 
    <input type="text" ng-model="name" ng-change="change()"> <span>{{name}}</span>
</div> 

<div class="div2" ng-controller="myCtrl2"> 
    <span>{{name}}</span> 
</div> 
 
</body>

＆＃13;

在示例中的Controller中共享数据 - AngularJs

3 个答案: