如何通过多个控制器重置示波器数据的值？
问题描述：
我是新来的角js，只是想知道如何重置其他控制器的一个控制器的范围。如何通过多个控制器重置示波器数据的值？
我有四个不同的div（控制器）具有刷新按钮，并在一个主父divs控制器有下拉选择。
- 点击刷新按钮，下拉更改事件的作品，但如果我点击特定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
的
我觉得有哪里父控制器不能够访问重置子控制器范围嵌套控制器的问题快照。
答
查看此片段。我已经使用日期clieck后确定刷新为你的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>
它工作，你刷新整个页面我的意思是数据刷新后，更换后这一页 .. ？ – mayank