Angular/Ionic：更新两个控制器中的 ng-change 值

Question

我需要一些代码审查，我无法让我的 ng-change 函数触发和更新两个控制器中的值，我创建了一个工厂服务并将其注入到两个控制器中，但是在第二个 AppCtrl console.log() 值在初始化期间只打印一次，并且希望 ng-change 值也在第二个控制器上更新，而不仅仅是在第一个控制器上。

这是我目前所拥有的：

 <ion-radio ng-repeat="rate in rates"
                       ng-value="rate.id"
                       ng-change="rateTypeChanged(rate)"
                       ng-checked="rate.selected"
                       ng-model="currentRate.selectedRate">
                       {{ rate.title }}
            </ion-radio>

侧边栏控制器：

.controller('SidebarCtrl', function($scope, typesOfRates) { 
$scope.rates = typesOfRates.rateType;

  $scope.currentRate = {
      selectedRate: 'hourly'
  };

  $scope.rateTypeChanged = function(rate) {
      console.log("Selected goalType, text:", rate.title, "value:", rate.id);
      typesOfRates.setRate(rate.id);
  }

在控制器 2 中：

   .controller('AppCtrl', function($scope, typesOfRates, $state, $rootScope) {
  console.log( typesOfRates.getRate() ); 
  //runs only once, but not again when ng-change event is triggered

我的服务：

  .factory('typesOfRates', function typesOfRates($rootScope) {

    var typesOfRates = {};
        typesOfRates.myRates = [];
        typesOfRates.rateType = [
            { title: "Hourly",  id: "hourly",  selected: true  },
            { title: "Daily",   id: "daily",   selected: false },
            { title: "Monthly", id: "monthly", selected: false }
        ];

        typesOfRates.currentRate = "hourly";

    var setRate = function(currentRate) {
        if (typesOfRates.myRates.length > 0) typesOfRates.myRates = [];
        typesOfRates.myRates.push(currentRate);
    }

    var getRate = function() {
        return typesOfRates.myRates;
    }

    return {
        rateType: typesOfRates.rateType,
        getRate:  getRate,
        setRate: setRate
    }
});

Answer 1

您实现目标的方式似乎有些开箱即用。第二个控制器将只初始化一次。如果您想在第二个控制器中访问未注明日期的值，您需要遵循以下方法之一。

1) 观察第二个控制器中typesOfRates.myRates 的变化。

$watch 用于跟踪范围内模型变量的更改。这 $watch 需要 $scope，因为我们有 2 个不同的控制器，所以范围会有所不同（我觉得是这样，除非你绑定了两个控制器 在同一个 html 中）。所以在这个使用 $watch 是不正确的 情况。

2) 使用广播接收器概念

优点：首选，因为不需要持续观看，只有在值变化时触发

步骤 1）在第一个控制器中，将广播注册为：

.controller('SidebarCtrl', function($scope, typesOfRates) { 
$scope.rates = typesOfRates.rateType;

  $scope.currentRate = {
      selectedRate: 'hourly'
  };

  $scope.rateTypeChanged = function(rate) {
      console.log("Selected goalType, text:", rate.title, "value:", rate.id);
      typesOfRates.setRate(rate.id);

      //$broadcast(name, args); here name you have to give in a file 
      //which is commonly accessible like constants.js, just create a 
      //file and include in you index.html, pass your rates as args
      $rootScope.$broadcast(constants_config.TYPE_RATES_CHANGED, rate.id);
  }
});

第 2 步）创建 constants.js 文件并包含在您的 index.html 中：

<!-----Constants Classes---->
<script src="Constants.js"></script>

在constants.js中添加如下代码：

var constants_config                      = {

    TYPE_RATES_CHANGED   :   "TYPE_RATES_CHANGED",
}

第 3 步）在第二个控制器中将您的侦听器注册为

 .controller('AppCtrl', function($scope, typesOfRates, $state, $rootScope) {
    // @CallBack
    // Description : Callback function for user details fetched
    $scope.$on(constants_config.TYPE_RATES_CHANGED, function(args) {
        //Assign the value to a global variable or a scope variable so                 
        //that  you can access it throughout your controller
        $scope.Rates = typesOfRates.getRate();

        //Now the console will work
        console.log( typesOfRates.getRate() ); 
    });


 });

进一步参考：
- 广播：$broadcast
- 听众：$on
- 观看：$watch