如何使用 Angular Js 1 將參數從指令傳遞到控制器中的函數

Question

我想將resourceManagerGrid傳遞給該resourceManagerAddPage函數，因為當我提交數據時，我希望看到那些反映的更改重新加載到該頁面上。 但是當我嘗試使用變量將$scope.resourceManagerGrid傳遞給該函數時，它給出了未捕獲的引用錯誤resourceManagerGrid undefined 。

請幫我找到解決方案。

 //Controller var resourceManagerSetUpApp = angular.module('resourceManagerSetUpApp', ['ngRoute', 'ngAnimate', 'ui.bootstrap', 'ng-tb-common', 'ng-tb-tabbar', 'ng-tb-header', 'ng-tb-attribute', 'ng-tb-attribute-row', 'ng-tb-menubar', 'ngSanitize', 'mgcrea.ngStrap', 'ngMaterial', 'ng-tb-ui-grid', 'ui.grid.autoResize', 'ui.grid.treeView', 'ui.grid.selection', 'ui.grid', 'ui.grid.resizeColumns', 'ng-tb-attribute-column', 'workTaskApp', 'requirementApp', 'documentApp']); resourceManagerSetUpApp.controller('tabController', function($scope, TabLoaderService) { var c = this; c.tabConfiguration = []; c.tabConfiguration.tabs = []; var servicePromise = TabLoaderService.getTabConfiguration(tabconfig); servicePromise.then(function(data) { c.tabConfiguration = data.tabconfiguration; }, function() { $log.error('Could not receive tabs .') }); }); resourceManagerSetUpApp.controller('resourceManagerDetailController', function($scope, TBHttpService, FormLoaderService, resourceManagerCommonService, uiGridService, uiGridConstants) { var c = this; $scope.resourceManagerGrid = {}; $scope.$on('resize::resize', function() { var dim = windowDimensions(); c.pageHeight = { "max-height": "" + (dim[1] - 145) + "px", "min-height": "" + (dim[1] - 145) + "px" }; }); //This the function i want to pass my resourceManagerGrid fnOpenResManagerCreateEditPage = function(ev, data) { resourceManagerCommonService.resourceManagerAddPage(ev, data, $scope.resourceManagerGrid); } }); resourceManagerSetUpApp.directive('resourceManagerGrid', function(uiGridService, TBHttpService, $rootScope, $mdDialog) { return { restrict: 'E', templateUrl: "ngtb/resource/resourceManager/view/resourceManagerGrid.jsp", scope: { resorcetype: "@", }, controller: function($scope, TBHttpService, $rootScope) { var dim = windowDimensions(); $scope.loading = true; $scope.showGrid = false; // For Dynamically Changes height,width $scope.$on('resize::resize', function() { var dim = windowDimensions(); $scope.gridHeight = { "max-height": "" + (dim[1] - 200) + "px", "min-height": "" + (dim[1] - 200) + "px", "max-width": "" + (dim[0] - 30) + "px", "min-width": "" + (dim[0] - 30) + "px", } }); // set grid height $scope.resourceManagerGridHeightCal = function() { dim = windowDimensions(); return { "max-height": "" + (dim[1] - 100) + "px", "min-height": "" + (dim[1] - 100) + "px", "max-width": "" + (dim[0] - 30) + "px", "min-width": "" + (dim[0] - 30) + "px", }; }; var resourceManagerConfig = angular.copy(tabconfig); // initialize Grid Data var extraParams = {}; extraParams["resorceType"] = $scope.resorcetype; var actions = uiGridService.seturlParams("resourceAction.do", "buildResourceManagerGrid", "", extraParams); $scope.resourceManagerGrid = {}; $scope.resourceManagerGrid.gridId = "resourceManagerGrid"; $scope.isContantGrid = false; $rootScope.$on('uiGridService.reloadGrid', function() { $scope.showGrid = true; $scope.loading = false; }); $rootScope.$on('uiGridService.Init', function() { $scope.showGrid = true; $scope.loading = false; }); $scope.initGrid = function() { $scope.resourceManagerGrid = uiGridService.init($scope.resourceManagerGrid, ''); // $scope.loading=true; }; $scope.initGrid(); } } }); resourceManagerSetUpApp.service('resourceManagerCommonService', ['TBHttpService', 'uiGridService', '$mdDialog', function(TBHttpService, uiGridService, $mdDialog, $log, $scope) { var resourceManagerCommonService = { resourceManagerAddPage: function(ev, data, scope) { $mdDialog.show({ controller: 'resourceManagerCreateEditController', templateUrl: "ngtb/resource/resourceManager/view/addResourceManager.html", targetEvent: ev, clickOutsideToClose: false, controllerAs: 'contrl', //actionForReload: locals: { objectInfoData: data //objectInfoData : $scope.resourceManagerGrid } // targetEvent: event, }).then(function(eventInfo) { if (eventInfo.resourceManagerGrid) { eventInfo.resourceManagerGrid(eventInfo); } }, function() { }); }, } return resourceManagerCommonService; }]); resourceManagerSetUpApp.controller('resourceManagerCreateEditController', function($scope, TBHttpService, FormLoaderService, $mdDialog, objectInfoData, FormValidationService, $window, $log, AttributeListRelationService) { var c = this; c.formData = []; var url = {}; var dimesionData = {} $scope.Title = objectInfoData.mode; url.objectType = objectInfoData.objectType; url.formId = objectInfoData.formId; url.classId = objectInfoData.classId; var urlString = ResourceUtil.fnBuildRequestString(null, url, null); var dataUrlDefault = null; dataUrlDefault = "wbsAction.do?action=AngularFormBuilder&" + urlString; $scope.popupStyle = { "min-height": "" + (70) + "%", "min-width": "" + (80) + "%", }; $scope.fnCancel = function() { $mdDialog.cancel(); }; $scope.fnSubmit = function() { var servicePromise = true; if (servicePromise == true) { servicePromise = FormValidationService.fnFormMandatoryValidation(c.formData, $scope, true); } if (true == servicePromise) { if (objectInfoData.mode == "Create") { $scope.isFormDataLoaded = false; var myHash = {}; myHash.objectType = objectInfoData.objectType; myHash.mode = objectInfoData.mode; myHash.classId = objectInfoData.classId var urlString = ResourceUtil.fnBuildRequestString(null, myHash, null); var url = "resorceManagerAction.do?action=saveManagerDetails&" + urlString; var dataPromise = TBHttpService.processRequest(url, 'POST', c.formData); dataPromise.then(function(response) { if (response.success) { var data = {}; data.resourceManagerGrid = objectInfoData.resourceManagerGrid; data.objectId = response.objectId; $mdDialog.hide(data); } alert(response.message); $scope.isDataLoaded = true; }, function() { $log.error('Could not receive any data.') }); } else if (objectInfoData.mode == "Edit") { $scope.isFormDataLoaded = false; var myHash = {}; myHash.objectType = objectInfoData.objectType; myHash.mode = objectInfoData.mode; myHash.classId = objectInfoData.classId var urlString = ResourceUtil.fnBuildRequestString(null, myHash, null); var url = "resorceManagerAction.do?action=saveManagerDetails&" + urlString; var dataPromise = TBHttpService.processRequest(url, 'POST', c.formData); dataPromise.then(function(response) { if (response.success) { var data = {}; data.resourceManagerGrid = objectInfoData.resourceManagerGrid; data.objectId = response.objectId; $mdDialog.hide(data); } alert(response.message); }, function() { $log.error('Could not receive any data.') }); } }; }; $scope.getFormConfigData = function() { FormLoaderService.getFormConfiguration(objectInfoData, objectInfoData.mode, dataUrlDefault).then(function(data) { c.formData = data; /*$scope.dimesionData=data; $scope.dialogHeightWidh =data.dimensionData.popupStyle ; $scope.dialogPageHeight =data.dimensionData.contentStyle; AttributeListRelationService.fnFillAllChildList(c.formData,$scope);*/ }, function() { $log.error('Could not receive tab details .') }); } $scope.getFieldSetAttributeFromFormData = function(attrId, formData) { var attr = null; angular.forEach(c.formData.fieldsets, function(fieldset, index) { angular.forEach(fieldset.attributes, function(attribute, attrIndex) { if (attribute.attrId == attrId) { attr = attribute; } }); }); return attr; }; $scope.$on('Attribute.OnChange', function(ev, attr, eventInfo) { var attrId = attr.attrId; var attrValue = attr.value; var userDateFormat = "dd-MM-yyyy"; if (attrId == 'EFFECTIVE_TO_DATE') { var toDate = attrValue; var fromDateAttrObj = $scope.getFieldSetAttributeFromFormData('EFFECTIVE_FROM_DATE'); var fromDate = DateUtil.fnGetDateFromString(userDateFormat, fromDateAttrObj.value); var toDate = DateUtil.fnGetDateFromString(userDateFormat, attr.value); if (toDate < fromDate) { attr.value = ''; alert("Effective to date can not be less than from date."); } } else if (attrId == 'EFFECTIVE_FROM_DATE') { var toDate = attrValue; var fromDateAttrObj = $scope.getFieldSetAttributeFromFormData('EFFECTIVE_TO_DATE'); var fromDate = DateUtil.fnGetDateFromString(userDateFormat, fromDateAttrObj.value); var toDate = DateUtil.fnGetDateFromString(userDateFormat, attr.value); if (toDate > fromDate) { attr.value = ''; alert("Effective from date can not be gretter than to date."); } } }); $scope.getFormConfigData(); var dim = windowDimensions(); // /set dimention of md-dialog box $scope.dialogHeightWidh = { "max-height": "" + ((80)) + "%", "min-width": "" + ((80)) + "%" }; $scope.dialogPageHeight = { "max-height": "" + ((dim[1] * 0.8) - 110) + "px", "min-height": "" + ((dim[1] * 0.8) - 110) + "px", "height": "" + ((dim[1] * 0.8) - 110) + "px" }; $scope.fullscreen = false; $scope.fnToggleScreenModal = function(showFullScreen) { var dim = windowDimensions(); if (showFullScreen) { $scope.fullscreen = true; $scope.dialogHeightWidh = { "min-height": "" + ((99)) + "%", "min-width": "" + ((99)) + "%" }; $scope.dialogPageHeight = { "max-height": "" + ((dim[1] * 1) - 105) + "px", "min-height": "" + ((dim[1] * 1) - 105) + "px", "height": "" + ((dim[1] * 1) - 105) + "px" }; } else { $scope.fullscreen = false; $scope.dialogHeightWidh = { "max-height": "" + ((80)) + "%", "min-width": "" + ((80)) + "%" }; $scope.dialogPageHeight = { "max-height": "" + ((dim[1] * 0.8) - 110) + "px", "min-height": "" + ((dim[1] * 0.8) - 110) + "px", "height": "" + ((dim[1] * 0.8) - 110) + "px" }; } }; });

Answer 1

您使用 $scope.resourceManagerGrid 作為第三個參數調用該函數。 該定義將 $scope 作為第三個參數，您嘗試從中獲取 .resourceManagerGrid。 所以基本上，您將調用上下文中的 $scope.resourceManagerGrid 放入函數內的 $scope 變量中。 然后您嘗試獲取屬性 $scope.resourceManagerGrid。 所以你嘗試獲取不存在的 $scope.resourceManagerGrid.resourceManagerGrid。

只需像您一樣調用該函數，並將第三個參數從 $scope 更改為 resourceManagerGrid，然后在函數內部使用它。