Javascript 在AngularJS中保持不同控制器中的变量同步_Javascript_Angularjs_Controller

Javascript 在AngularJS中保持不同控制器中的变量同步

javascript angularjs

Javascript 在AngularJS中保持不同控制器中的变量同步,javascript,angularjs,controller,Javascript,Angularjs,Controller,在控制器中，我运行一个间隔，并在视图上显示变量值： $scope.value = 0; var $higherScope = $scope; interval = $interval(function () { $scope.value++; }, 1000); $modal.open({ templateUrl: 'modal.html', backdrop: true, windowClass: 'modal',

在控制器中，我运行一个间隔，并在视图上显示变量

值

：

$scope.value = 0;
var $higherScope = $scope;


interval = $interval(function () {

    $scope.value++; 

}, 1000);

$modal.open({
        templateUrl: 'modal.html',
        backdrop: true,
        windowClass: 'modal',
        controller: function ($scope, $modalInstance) {

            $scope.value = $higherScope.value;

        }
    });

现在我打开一个模式，我还想显示这个变量的计数：

$scope.value = 0;
var $higherScope = $scope;


interval = $interval(function () {

    $scope.value++; 

}, 1000);

$modal.open({
        templateUrl: 'modal.html',
        backdrop: true,
        windowClass: 'modal',
        controller: function ($scope, $modalInstance) {

            $scope.value = $higherScope.value;

        }
    });

当我这样做时，变量不会与上方

$scope

中的原始

var

同步显示，而只是显示打开模式时变量的状态

如何实现在模式中显示与在上层控制器中显示相同的内容，即现场计数？

一种方法是将您的价值注入到一个服务中，该服务将注入到两个控制器中

编辑：

var app = angular.module('plunker', []);

// For siplicity I put two controllers and a service/factory in this same file.
// IRL you everything should have its own file ;-)


app.factory('valueService', function($interval) {
  var service = {
    value: 0,
  };

  return service;
});



app.controller('SomeController', function($scope, $interval, valueService) {
  $scope.name = 'Some Controller';

  start();      // this line will execute when constructor initiates, starting the whole thing.

  function start() {
    $interval(function(){
      valueService.value++;   // this ctrl increments a value of the shared service (that the other controller uses to update its view)
    }, 1000);
  }
});


app.controller('AnotherController', function($scope, valueService) {
  $scope.name = 'Another Controller';
  $scope.valueService = valueService;
});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>

  <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.13/angular.js" data-semver="1.3.13"></script>
  <script src="app.js"></script>

</head>

<body>
  <div ng-controller="SomeController">
    <p>{{name}}</p>
  </div>
<hr/>

  <div ng-controller="AnotherController">
    <p>{{name}}</p>
    <p>{{valueService.value}}</p>
  </div>
</body>

</html>

在SomeController中使用$interval（与OP一样）更新另一个控制器视图中显示的值的简化示例

希望这更清楚：

app.js：

var app = angular.module('plunker', []);

// For siplicity I put two controllers and a service/factory in this same file.
// IRL you everything should have its own file ;-)


app.factory('valueService', function($interval) {
  var service = {
    value: 0,
  };

  return service;
});



app.controller('SomeController', function($scope, $interval, valueService) {
  $scope.name = 'Some Controller';

  start();      // this line will execute when constructor initiates, starting the whole thing.

  function start() {
    $interval(function(){
      valueService.value++;   // this ctrl increments a value of the shared service (that the other controller uses to update its view)
    }, 1000);
  }
});


app.controller('AnotherController', function($scope, valueService) {
  $scope.name = 'Another Controller';
  $scope.valueService = valueService;
});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>

  <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.13/angular.js" data-semver="1.3.13"></script>
  <script src="app.js"></script>

</head>

<body>
  <div ng-controller="SomeController">
    <p>{{name}}</p>
  </div>
<hr/>

  <div ng-controller="AnotherController">
    <p>{{name}}</p>
    <p>{{valueService.value}}</p>
  </div>
</body>

</html>

index.html：

var app = angular.module('plunker', []);

// For siplicity I put two controllers and a service/factory in this same file.
// IRL you everything should have its own file ;-)


app.factory('valueService', function($interval) {
  var service = {
    value: 0,
  };

  return service;
});



app.controller('SomeController', function($scope, $interval, valueService) {
  $scope.name = 'Some Controller';

  start();      // this line will execute when constructor initiates, starting the whole thing.

  function start() {
    $interval(function(){
      valueService.value++;   // this ctrl increments a value of the shared service (that the other controller uses to update its view)
    }, 1000);
  }
});


app.controller('AnotherController', function($scope, valueService) {
  $scope.name = 'Another Controller';
  $scope.valueService = valueService;
});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>

  <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.13/angular.js" data-semver="1.3.13"></script>
  <script src="app.js"></script>

</head>

<body>
  <div ng-controller="SomeController">
    <p>{{name}}</p>
  </div>
<hr/>

  <div ng-controller="AnotherController">
    <p>{{name}}</p>
    <p>{{valueService.value}}</p>
  </div>
</body>

</html>


安古拉斯普朗克
文件。写（“”）；
{{name}}

{{name}}
{{valueService.value}

我不明白。你能给我看看这件我的箱子的短款吗？在一个控制器中计算工厂中的变量，并在另一个控制器中进行同步？我希望我的新plunker示例能有所帮助。还有其他方法可以做到这一点，比如嵌套范围。如果两个控制器位于变量“value”所在的同一父范围内，则两者都可以更改并查看父范围“value”的更改。这只是一个不同的策略，选择最合适的。谢谢，这真的帮助了我。两个问题：1）如何使用第二个备选方案使两个控制器位于同一父作用域中？我必须使用一个新的控制器吗？两者都在哪里？2）你的前任对我来说很好。在我的例子中，我在服务中有一个数组。为每个索引设置数组的值，如

valueService.value[0]=data[0]

，对我来说很好，但是

valueService.value=data

不起作用。为什么？1）将控制器嵌套在视图中的*.html文件中。是的，您需要一个ParentController、ChildAController和ChildBController。2）如果设置整个数组，它将不起作用，但设置每个元素都会起作用。这与绑定的工作方式有关（我所说的绑定是指angulars Controller View magic updater）。更改整个数组很可能不会使绑定发生反应，我猜您在视图中使用的是ng repeat。您能在视图中看到更新的valueService.value.length吗？如果这对你很重要的话，给我看更多的代码@伙计，我很高兴能帮上忙。现在你在评论中问了两个问题。这使我很难回答。如果我在评论中回答，我无法格式化代码，如果你喜欢我的答案，我就无法获得声誉，其他人不清楚等等。如果我“添加另一个答案”并在评论中回答问题。。。其他人认为这是对主要问题的回答，这会让他们感到困惑，他们会因为我无关紧要或其他原因而投票否决我。创建一个新答案。将url粘贴到评论中，并提及我，这样我就可以在单独的案例中为您回答这个问题。