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）注意第二个控制器中.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); } });的更改。

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

2）使用广泛的接收器概念

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

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

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

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

var constants_config                      = {

    TYPE_RATES_CHANGED   :   "TYPE_RATES_CHANGED",
}

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

 .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() ); 
    });


 });

步骤3）在第二个控制器中注册您的监听器

SELECT *
FROM dbo.MainTable mt
LEFT JOIN Lookup_Items msn ON mt.Item = msn.Item_ID
WHERE msn.Item_ID is NULL

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

角度/离子：更新两个控制器中的ng-change值

1 个答案: