在多个控制器或视图中使用ng-model

16 浏览
0 Comments

在多个控制器或视图中使用ng-model

假设我的导航栏(navbar)位于导航栏控制器(navbar controller)，而我正在另一个控制器(controller)中进行一些值操作，我如何能够更新导航栏的值呢？

以下是我创建的一个小例子，用于表达我的问题：

http://jsfiddle.net/zmw43zdp/

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

我想要更新 ctrl2 控制器的 {{number}} 值。

0

2 答案

0 Comments

在Angular中，最干净的共享数据的方式是使用服务（Service）。以下是根据你的示例更改的代码。基本上，你将要共享的真正数据保存在服务实例中，服务是一个单例，然后在服务中创建setter和getter以及递增函数。然后，从两个控制器中删除本地的$scope.number。在控制器中无法将数据绑定到服务中的数据，但是可以将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;
}]);





  

    {{getNumber()}}
    
    
  

  
  
  

    {{getNumber() || 0}}

在这个例子中，我们使用了一个名为sharedModelService的服务来共享数据。这个服务有一个变量number，初始值为0。我们在ctrl控制器中通过sharedModelService.initNumber(1)来将number的值设置为1，并通过$scope.getNumber = sharedModelService.getNumber将sharedModelService.getNumber()方法绑定到$scope上。在视图中，我们通过{{getNumber()}}来显示number的值，并通过ng-click="increment()"来调用sharedModelService.increment()方法来递增number的值。在ctrl2控制器中，我们也将sharedModelService.getNumber()方法绑定到$scope上，并在视图中显示number的值。

这样，我们就通过服务成功地在多个控制器和视图之间实现了数据共享。不再需要使用$watch来监听数据变化。

0
0 Comments

问题的原因是想要在多个控制器之间共享成员。解决方法是创建一个父控制器，通过在HTML中使用ng-controller指令将子控制器嵌套在父控制器中，从而实现共享成员的目的。然而，这种方法存在一个限制，即如果有多个页面和用户访问控制，则需要使用多个父控制器，这会导致代码变得复杂和难以维护。

为了避免使用多个父控制器，我们可以使用服务（service）来实现共享数据。服务是AngularJS中的一种特殊类型的对象，可以在多个控制器之间共享数据和功能。我们可以创建一个名为"sharedData"的服务，并在需要共享数据的控制器中注入这个服务。然后，我们可以通过服务的方法来修改和访问共享数据。

下面是使用服务来实现共享数据的示例代码：

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

然后在HTML中使用这些控制器：


    

        {{sharedData.number}}
        
    

    
    

        {{sharedData.number || 0}}

使用服务可以避免使用多个父控制器，使代码更加简洁和易于维护。同时，通过服务可以方便地对共享数据进行修改和访问，提高了代码的可读性和可扩展性。

0