从另一个控制器Angularjs调用函数 [英] Call function from another controller Angularjs
本文介绍了从另一个控制器Angularjs调用函数的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这是我的简单控制器:
XApp.controller('LoadCountriesController', function ($scope, GetAllCountries, $http, $location) {
console.log('Step 3');
var Obj = new Object();
Obj.SPNAME = "GetAllCountry";
$scope.countryData = GetAllCountries.query({ parameters: Obj }, function () {
$scope.countryList = $scope.countryData;
console.log(JSON.stringify($scope.countryList));
});
$scope.$on('bindmsDropDown', function (ngRepeatFinishedEvent) {
var CountryCode = "in";
//Check whether the cookie is already set
var cookiename = 'currency';
if ($.cookie(cookiename)) {
$("#countries").val($.cookie(cookiename));
CountryCode = $.cookie(cookiename);
}
else {
$("#countries").val('in');
$.cookie('currency', $("#countries").val(), { expires: 365, path: '/' });
CountryCode = $("#countries").val();
}
$("#countries").msDropdown();
});
});
XApp.factory('GetAllCountries', function ($resource) {
console.log('Step 4');
return $resource('api/master/:object?type=json', {}, { 'query': { method: 'GET', isArray: true } });
});
我使用上面的控制器来填充下拉列表:
I am using the above controller to populate a drop down list :
<div class="CountryDDL" data-ng-controller="LoadCountriesController">
<select name="countries" id="countries" style="width: 84px; display: block;">
<option on-finish-render="bindmsDropDown" data-ng-repeat="country in countryList" value="{{ country.CountryCode }}" data-image="content/themes/msdropdown/icons/blank.gif" data-imagecss="flag {{ country.CountryCode }}" data-title="{{ country.CurrencyName }}" >{{ country.CurrencyCode }}</option></select></div>
我想调用函数(loadData)
来自另一个控制器(ProductsController)
在选择的 onchange
事件中。
I want to call a function (loadData)
from another controller (ProductsController)
on the onchange
event of the select.
var ProductsController = function ($scope, GetProductsForIndex, $http, $location) {
console.log('Step 1');
$scope.products = [];
$scope.busy = false;
var indexPageNo = 0;
$scope.loadData = function () {
if ($scope.busy) return;
$scope.busy = true;
indexPageNo += 1;
var Obj = new Object();
Obj.PAGEINDEX = indexPageNo;
Obj.PAGESIZE = 20;
Obj.SPNAME = "index_get_products";
Obj.PAGECOUNT = null;
Obj.COUNTRYCODE = 'in'
$scope.data = GetProductsForIndex.query({ parameters: Obj }, function () {
console.log(JSON.stringify($scope.data));
for (var i = 0; i < $scope.data.length ; i++) {
$scope.products.push($scope.data[i]);
}
$scope.busy = false;
});
}
//$scope.loadData();
$scope.$on('bindWookmarkHandler', function (ngRepeatFinishedEvent) {
console.log("done");
if (indexPageNo === 1) {
executeOnFirstLoad();
} else {
var handler = null;
var options = {
autoResize: true, // This will auto-update the layout when the browser window is resized.
container: $('#main'), // Optional, used for some extra CSS styling
offset: 17, // Optional, the distance between grid items
itemWidth: 225 // Optional, the width of a grid item
};
if (handler) handler.wookmarkClear();
// Create a new layout handler.
handler = $('#tiles li');
handler.wookmark(options);
}
});
};
XApp.factory('GetProductsForIndex', function ($resource) {
console.log('Step 2');
return $resource('api/index/:object?type=json', {}, { 'query': { method: 'GET', isArray: true } });
});
推荐答案
您可以使用服务来共享数据AngularJS中的控制器。有关详细信息,请参阅此 stackoverflow问题。
You can use services to share data between controllers in AngularJS. See this stackoverflow question for more info.
这是一个示例:
// declare the app with no dependencies
var myApp = angular.module('myApp', []);
// A service to share data between FirstCtrl and SecondCtrl
myApp.factory('Data', function(){
return { FirstName: '' };
});
myApp.controller('FirstCtrl', function( $scope, Data ){
$scope.Data = Data;
});
myApp.controller('SecondCtrl', function( $scope, Data ){
$scope.Data = Data;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" style="width:500px;background:#d2d0d0; padding:10px 30px; margin:0 auto;">
<div ng-controller="FirstCtrl">
<b>First Controller</b><br/><br/>
<input type="text" ng-model="Data.FirstName"><!-- Input entered here -->
<br>Input is : <strong>{{Data.FirstName}}</strong><!-- Successfully updates here -->
</div>
<hr>
<b>Second Controller</b><br/><br/>
<div ng-controller="SecondCtrl">
Input should also be here: {{Data.FirstName}}<!-- Successfully updated it here too -->
</div>
</div>
这篇关于从另一个控制器Angularjs调用函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文