javascript - 如何通过多个 Controller 重置示波器数据值？

Question

我是 Angular js 新手，只想知道如何从另一个 Controller 重置一个 Controller 的范围。

我有四个不同的 div( Controller )，它们具有刷新按钮，并且在一个主父 div Controller 中具有下拉选择。

-- 单击刷新按钮，下拉更改事件有效，但如果我单击特定 div 的刷新，则该 div 不会在下拉更改事件上刷新。

var parentModule = angular.module("parentModule", []);



parentModule.factory('myService', function($http) {
  return {
    getDataForBox1: 
    function() 
    {

      var box1data = $http.get('/testurl/test/getAllProfilesForBox1').then(function(result) {return result.data;});return box1data;
    },
    getDataForBox2: 
    function() 
    { 
      console.log("getDataForBox2 called")
      var box2data = $http.get('/testurl/test/getAllProfilesForBox2').then(function(result) {return result.data;});return box2data;
    },
    getDataForBox3: 
    function() 
    {
      console.log("getDataForBox3 called")
      var box3data = $http.get('/testurl/test/getAllProfilesForBox3').then(function(result) {return result.data;});return box3data;
    },
    getDataForBox4: 
    function() 
    { 
      console.log("getDataForBox4 called")
      var box4data = $http.get('/testurl/test/getAllProfilesForBox4').then(function(result) {return result.data;});return box4data;
    }

  }
});

parentModule.controller('box1Controller', function($scope, myService) {
  $scope.go = function() {
    myService.getDataForBox1().then(function(profiles1) {
      .profiles1 = profiles1;
    });
  }
});

parentModule.controller('box2Controller', function($scope, myService) {
  $scope.go2 = function() {
    myService.getDataForBox2().then(function(profiles2) {
      $scope.profiles2 = profiles2;
    });
  }
});

parentModule.controller('box3Controller', function($scope, myService) {
  $scope.go3 = function() {
    myService.getDataForBox3().then(function(profiles3) {
      $scope.profiles3 = profiles3;
    });
  }
});

parentModule.controller('box4Controller', function($scope, myService) {
  $scope.go4 = function() {
    myService.getDataForBox4().then(function(profiles4) {
      $scope.profiles4 = profiles4;
    });
  }
});


parentModule.controller('ctrl', function($scope, myService) {

  $scope.changedValue = function() {
    myService.getDataForBox1().then(function(profiles1) {
      $scope.profiles1 = profiles1;
    });
    myService.getDataForBox1().then(function(profiles2) {
      $scope.profiles2 = profiles2;
    });

    taForBox1().then(function(profiles3) {
      $scope.profiles3 = profiles3;
    });

    myService.getDataForBox1().then(function(profiles4) {
      $scope.profiles4 = profiles4;
    });
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="parentModule">
  <div style="width: 100%; display: table;" ng-controller="ctrl">
    <div style="display: table-row">
      <div style="display: table-cell; background-color: lightgreen"
           ng-controller="box1Controller">
        <b>Box - 1 </b>
        <table class="table">

          <tr ng-repeat="profile in profiles1">
            <td>{{profile.firstname}}</td>
            <!-- <td>{{profile.lastname}}</td> -->
            <td> Server Date {{profile.serverDate}}</td>
          </tr>
          <tr>
            <td colspan="2"></td>
          </tr>
        </table>

        <a ng-click='go()'>Refresh</a>
      </div>

      <div style="display: table-cell; background-color: lightblue"
           ng-controller="box2Controller">
        <b>Box - 2</b>
        <table class="table">

          <tr ng-repeat="profile in profiles2">
            <td>{{profile.firstname}}</td>
           </tr>

        </table>
        <a ng-click='go2()'>Refresh</a>
      </div>
      <div style="display: table-cell; background-color: lightgreen"
           ng-controller="box3Controller">
        <b>Box - 3 </b>
        <table class="table">

          <tr ng-repeat="profile in profiles3">
            <td>{{profile.firstname}}</td>
            <!-- <td>{{profile.lastname}}</td> -->
            <td>Server Date {{profile.serverDate}}</td>

          </tr>
        </table>
        <a ng-click='go3()'>Refresh</a>
      </div>
      <div style="display: table-cell; background-color: lightblue"
           ng-controller="box4Controller">
        <b>Box - 4</b>
        <table class="table">

          <tr ng-repeat="profile in profiles4">
            <td>{{profile.firstname}}</td>
            <!-- <td>{{profile.lastname}}</td> -->
            <td>Server Date {{profile.serverDate}}</td>
          </tr>
        </table>
        <a ng-click='go4()'>Refresh</a>
      </div>
      <br> <br>
    </div>

    <div align="center">
      <b>Refresh All Box :</b> <select ng-model="item" ng-change="changedValue()">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      </select>
    </div>
  </div>
</div>

注意:这里我在刷新和下拉更改事件上进行ajax调用。

获取 UI 快照

我认为嵌套 Controller 存在问题，其中父 Controller 无权重置子 Controller 范围。

Answer 1

检查这个片段。我已经使用日期来识别点击后的刷新，因为你的ajax无法将数据返回给我..:)

var parentModule = angular.module("parentModule", []);
    parentModule.factory('myService', function ($http) {
        return {
            getDataForBox1:
                function () {
                    var box1data = $http.get('/testurl/test/getAllProfilesForBox1').then(function (result) { return result.data; }); return box1data;
                },
            getDataForBox2:
                function () {
                    console.log("getDataForBox2 called")
                    var box2data = $http.get('/testurl/test/getAllProfilesForBox2').then(function (result) { return result.data; }); return box2data;
                },
            getDataForBox3:
                function () {
                    console.log("getDataForBox3 called")
                    var box3data = $http.get('/testurl/test/getAllProfilesForBox3').then(function (result) { return result.data; }); return box3data;
                },
            getDataForBox4:
                function () {
                    console.log("getDataForBox4 called")
                    var box4data = $http.get('/testurl/test/getAllProfilesForBox4').then(function (result) { return result.data; }); return box4data;
                }
        }
    });
    parentModule.controller('box1Controller', function ($scope, myService) {
        $scope.go = function () {
            $scope.profiles1 = [new Date(), new Date(), new Date(), new Date(), new Date()];
            myService.getDataForBox1().then(function (profiles1) {
                $scope.profiles1 = profiles1;
            });
        }
    });
    parentModule.controller('box2Controller', function ($scope, myService) {
        function addDays(theDate, days) {
            return new Date(theDate.getTime() + days * 24 * 60 * 60 * 1000);
        }
        $scope.go2 = function () {
            $scope.profiles2 = [addDays(new Date, 2), addDays(new Date, 2), addDays(new Date, 2), addDays(new Date, 2)]
            myService.getDataForBox2().then(function (profiles2) {
                $scope.profiles2 = profiles2;
            });
        }
    });
    parentModule.controller('box3Controller', function ($scope, myService) {
        function addDays(theDate, days) {
            return new Date(theDate.getTime() + days * 24 * 60 * 60 * 1000);
        }
        $scope.go3 = function () {
            $scope.profiles3 = [addDays(new Date(), 3), addDays(new Date(), 3), addDays(new Date(), 3), addDays(new Date(), 3)];
            /*myService.getDataForBox3().then(function(profiles3) {
               $scope.profiles3 = profiles3;
            });*/
        }
    });
    parentModule.controller('box4Controller', function ($scope, myService) {
        function addDays(theDate, days) {
            return new Date(theDate.getTime() + days * 24 * 60 * 60 * 1000);
        }
        $scope.go4 = function () {
            $scope.profiles4 = [addDays(new Date(), 4), addDays(new Date(), 4), addDays(new Date(), 4), addDays(new Date(), 4)]
            myService.getDataForBox4().then(function (profiles4) {
                $scope.profiles4 = profiles4;
            });
        }
    });
    parentModule.controller('ctrl', function ($scope, myService) {
        $scope.changedValue = function () {
            myService.getDataForBox1().then(function (profiles1) {
                $scope.profiles1 = profiles1;
            });
            myService.getDataForBox1().then(function (profiles2) {
                $scope.profiles2 = profiles2;
            });
            myService.getDataForBox1().then(function (profiles3) {
                $scope.profiles3 = profiles3;
            });
            myService.getDataForBox1().then(function (profiles4) {
                $scope.profiles4 = profiles4;
            });
        };
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div ng-app="parentModule">
    <div style="width: 100%; display: table;" ng-controller="ctrl">
        <div style="display: table-row">
            <div style="display: table-cell; background-color: lightgreen"
                ng-controller="box1Controller">
                <b>Box - 1 </b>
                <table class="table">
                   <tr ng-repeat="profile in profiles1">
                        <td>{{profile}}</td>
                        <!-- <td>{{profile.lastname}}</td> -->
                        <td>Server Date {{profile.serverDate}}</td>
                    </tr>
                    <tr>
                        <td colspan="2"></td>
                    </tr>
                </table>
               <a ng-click='go()'>Refresh</a>
            </div>
           <div style="display: table-cell; background-color: lightblue"
                ng-controller="box2Controller">
                <b>Box - 2</b>
                <table class="table">
                   <tr ng-repeat="profile in profiles2">
                        <td>{{profile}}</td>
                        <!-- <td>{{profile.lastname}}</td> -->
                        <td>Server Date {{profile.serverDate}}</td>
                   </tr>
               </table>
                <a ng-click='go2()'>Refresh</a>
            </div>
            <div style="display: table-cell; background-color: lightgreen"
                ng-controller="box3Controller">
                <b>Box - 3 </b>
                <table class="table">
                   <tr ng-repeat="profile in profiles3">
                        <td>{{profile}}</td>
                        <!-- <td>{{profile.lastname}}</td> -->
                        <td>Server Date {{profile.serverDate}}</td>
                   </tr>
                </table>
                <a ng-click='go3()'>Refresh</a>
            </div>
            <div style="display: table-cell; background-color: lightblue"
                ng-controller="box4Controller">
                <b>Box - 4</b>
                <table class="table">
                   <tr ng-repeat="profile in profiles4">
                        <td>{{profile}}</td>
                        <!-- <td>{{profile.lastname}}</td> -->
                        <td>Server Date {{profile.serverDate}}</td>
                   </tr>
               </table>
                <a ng-click='go4()'>Refresh</a>
            </div>
           <br>
            <br>
        </div>
        <div align="center">
            <b>Refresh All Box :</b>
            <select
                ng-model="item"
                ng-change="changedValue()">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
        </div>
    </div>
</div>