ng模型跨多个控制器或视图

ng-model across multiple controllers or views

本文关键字：控制器 视图 模型 ng      更新时间：2024-04-29

想象一下，我的导航栏在导航栏控制器上，而我正在另一个控制器中进行值操作，我如何更新我的导航条的值？

下面是我创建的一个小例子来表达我的问题

http://jsfiddle.net/zmw43zdp/

<div ng-app="app">
    <div ng-controller="ctrl">
        {{number}}
        <br><button ng-click="increment()">Increment</button>
    </div>
    <br>
    <br>
    <div ng-controller="ctrl2">
        {{number || 0}} 
    </div>
</div>
angular.module("app", [])
.controller("ctrl", ["$scope", function($scope){
    $scope.number = 1;
    $scope.increment = function(){
        $scope.number++;
    }
}])
.controller("ctrl2", ["$scope", function($scope){
}]);

我想更新ctrl2控制器的｛｛number｝｝。

在之间共享数据的干净方式总是使用Angular Service。这是我根据你的例子修改的代码。基本上

  1. 您将要共享的真正数据保存在Service实例中
  2. 哪一个是singleton，那么您就制作setter和getter以及增量服务中的功能
  3. 然后删除本地的$scope.number来自两个控制器
  4. 您无法将数据绑定到控制器到服务中的数据，但您可以绑定getter方法转换为$scope，这样您就可以在中调用getter方法视图

angular.module("app", [])
  .factory("sharedModelService", function() {
    var model = this;
    var number = 0;
    model.initNumber = function(value) {
    	return number = value;
    }
    
    model.getNumber = function() {
      return number;
    }
    model.increment = function() {
      return ++number;
    }
    return model;
  })
  .controller("ctrl", ["$scope", "sharedModelService", function($scope, sharedModelService) {
    sharedModelService.initNumber(1);
    $scope.getNumber = sharedModelService.getNumber;
    $scope.increment = function() {
      sharedModelService.increment();
    }
  }])
.controller("ctrl2", ["$scope", "sharedModelService", function($scope, sharedModelService) {
    $scope.getNumber = sharedModelService.getNumber;
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="ctrl">
    {{getNumber()}}
    <br>
    <button ng-click="increment()">Increment</button>
  </div>
  <br>
  <br>
  <div ng-controller="ctrl2">
    {{getNumber() || 0}}
  </div>
</div>

因此，您希望在控制器中共享成员。事实上，有不同的方法可以实现这一点，但我建议创建一个如下的父控制器：

angular.module("app", [])
.controller("parent", ["$scope", function($scope){
 $scope.number = 0; 
}]
.controller("ctrl", ["$scope", function($scope){
    $scope.number = 1;
    $scope.increment = function(){
        $scope.number++;
    }
}])
.controller("ctrl2", ["$scope", function($scope){
   $scope.number= 1;
}]);

以及在html:中

<div ng-app="app" ng-controller="parent">
    <div ng-controller="ctrl">
        {{number}}
        <br><button ng-click="increment()">Increment</button>
    </div>
    <br>
    <br>
    <div ng-controller="ctrl2">
        {{number || 0}} 
    </div>
</div>

我相信这是一种干净整洁的方式。

相关文章：