UI Grid refresh in Angular - javascript

From a different controller a modal pop up opens. On closing of the modal pop up , I will do something and I want to transfer the data to a different controller which populates a UI grid and is bound to $scope.searchResultsGridOptions.
So in my ABCCtrl.js file :
On closing of a modal , I do :
$("#iConfirmationModal").on('hidden.bs.modal', function () {
$state.go('transaction.search.results', {});
//I close all the modals
$uibModalStack.dismissAll();
//I get the stored search criteria
var searchResultsParam = TransactionDataServices.getSavedSearchParams();
//Using them I hit the web service again and get the data to reload the UI Grid
TransactionServices.getTransactionAdvSearchResults(searchResultsParam).then(function (result) {
//I got the result
console.log(result);
/Now I want to reload the grid with this data , but the grid scope object which binds to this , is in separate controller
searchResultsGridOptions.data = result;
});
});
In DEFCtrl.js
I have
getSearchResultsGridLayout: function (gridOptions, uiGridConstants, datas) {
gridOptions.multiSelect = false;
// gridOptions.data.length = 0;
// gridOptions.data = '';
gridOptions.data = datas;
console.log("Grid Data ");
console.log(datas);
console.log(gridOptions.data);
angular.element(document.getElementsByClassName('grid')[0]).css('height', '0px');
// console.log(datas.length);
return gridOptions;
}
But how would I only change the data only when modal closes ?
Rest of the time it should not refresh the Grid ?
Or ,
Is there any way when on closing of the modal , instead of simply go back to the state using $state.for() and seeing the previous unrefreshed data , I can see the refreshed data ?

Hi I think you do not need to call the "TransactionServices.getTransactionAdvSearchResults()" in the "ABCCtrl" controller but you have to call it in the "DEFCtrl" controller.
You need to find a way to pass the "searchResultsParam" extracted in "ABCCtrl" to "DEFCtrl".
You can use the ui-router state parameters. You can specify a parameter in the "transaction.search.results" state, like this:
.state('transaction.search.results', {
...
params: {
searchResultsParam: null
}
...
})
And in the "ABCCtrl" pass it to the state:
$("#iConfirmationModal").on('hidden.bs.modal', function () {
//I close all the modals
$uibModalStack.dismissAll();
//I get the stored search criteria
var searchResultsParam = TransactionDataServices.getSavedSearchParams();
$state.go('transaction.search.results', {searchResultsParam: searchResultsParam});
Then, in "DEFCtrl" you can read it and call the "TransactionServices.getTransactionAdvSearchResults()" method.

Related

comunication between controllers isnt working with $scope.broadcast and $scope.on

I guys, in my previous post here I ask how to comunicate between 2 controllers, inside the same file. I have a button where I pass a name inside ng-click with a tab name. When i click in this button the goal is to open a new view in the specified tab inside ng-click.
Each controller have a view instantiated with ng-controller, so they dont share the same view.
At now I have,
dashboardController:
button inside datatable :
return icon = '<center><a class="state-link" data-state-id="' + data.id + '" ng-click="setActiveTab(\'system\')"><i style="color:#0040ff; width:21px; height:21px" title="System threshold exceed" class="fa fa-warning"></i></a></center>';
controllerScope.setActiveTab = function (name) {
console.log("setActiveTab()");
console.log("name ",name);
$rootScope.$broadcast('myCustomEvent', name);
}
dashboardDeviceController:
Here I have the var i want to change
controllerScope.activeTab = {
consumptions: true,
network : false,
ap : false,
modem : false,
system : false,
};
$rootScope.$on('myCustomEvent', function(event, data) {
console.log("myCustomEvent ", data);
for (var tabName in controllerScope.activeTab) {
if (controllerScope.activeTab[tabName] == data) {
controllerScope.activeTab[tabName] = data;
break;
}
}
});
I have a problem and when I click in the button nothing happen.. so is there a problem with $rootScope.on or $rootScope.broadcast??? I cant figure this out ...
you should use $scope to broadcast and `subscribe,
So, change controllerScope.$broadcast('myCustomEvent', name); to $scope.$broadcast('myCustomEvent', name);
controllerScope.setActiveTab = function (name) {
console.log("setActiveTab()");
console.log("name ",name);
$scope.$broadcast('myCustomEvent', name);
}
Have a look at the accepted answer here
You can either broadcast on $rootScope, to have the whole app hear it, or if you don't want to, you need to make sure that the broadcast is meant for the $scope itself and its children. In summary, one controller should be a child of the other.

angularjs function called just after the first click

I have an issue with angularjs 1 and ionic is that I have a list of items , so I want to show the clicked item properties , so I tried to ways to save the id of the clicked item, but the same issue which is , just the first time after refreshing the page (while serving on laptop) I got the right clicked item properties , but if I clicked back and tried to click on another item i get the properties of the item i clicked first! why is that happening ? how can I fix this ? thank you
this is the service for storing and retrieving the id :
.service('eventID', ['$rootScope', function($rootScope) {
this.saveID = function(id) {
$rootScope.ID = id;
}
this.getID = function() {
return $rootScope.ID;
}
}]);
this is what's inside the first controller :
$scope.setMaster = function(event) {
$scope.selected = null;
$scope.selected = event.id;
eventID.saveID($scope.selected);
$state.go('detail');
}
this is what's inside the second controller where i will get the id of the selected item :
$scope.selected = eventID.getID();

force click event to occur without click

I have written one function in angular js which is called on click on any button using ng-click . I have to call event on page load ? how can i call event from js directely without click.
$scope.$emit i tried but it is not working !!
$scope.loaddcurrent = function(pagename) {
console.log('called'+pagename);
$scope.templateurl = pagename;
if (pagename == "gallery.html") {
//Initially loading image data as gallery is initially set to image
console.log('gallery .html is --------->');
$scope.images = [];
$scope.imageCategories = [];
$scope.currentImage = {};
$scope.images = Gallery.query({
media : "image"
});
//Not used below part currently
$scope.currentImage = _.first($scope.images);
$scope.imageCategories = _.uniq(_.pluck($scope.images, 'category'));
}
};
please, put an id on a div (or component) with ng-control:
<div id="myControl" ng-control="MyControl">
and now, you can call after dom load
$(function() {
angular.element(document.getElementById('myControl')).scope().loaddcurrent();
});
of course, if you not use jquery, call on window.load... but I prefer jquery :-)

Scroll to bottom of page after get request AngularJs

I'm familiar with using something like:
$scope.gotoBottom = function(){
$location.hash('bottom');
$anchorScroll();
}
and this works.. yet what I'm seeing is an issue when retrieving data that's being used in an ng-repeat and attempting to resize when that data comes in.
Example (in controller):
users.get({userList:$routeParams.conversationId}, function(data){
$scope.userList = data;
$scope.gotoBottom();
})
The gotoBottom method is firing to fast, while the ng-repeat is looking on $scope.userList and buidling it's table based off that.
I want to be able to toggle gotoBottom after that list has been remade (or whenever it's modified). Is there a better way to achieve this?
Thank you!
You can use $watch listener to fire gotoBotton when an AngularJs variable change.
$scope.ActivityList = new Array();
$scope.$watch("ActivityList", function () {
$scope.$evalAsync(function () {
$scope.DoSomething();
});
}, true);
$scope.DoSomething = function () {
$(function () {
//$scope.gotoBottom();
});
};
Also you can run scrolling bottom after page is loaded
angular.element($window).bind('load',
function() {
var element = document.getElementById("messages-list").lastElementChild;
element.id = "bottom";
/*-------------*/
$location.hash('bottom');
$anchorScroll();
}

Populating a FilteringSelect datastore from an onChange event

I'm trying to bind an onChange event of one FilteringSelect to populate another FilteringSelect.
// View
dojo.addOnLoad(function () {
dojo.connect(dijit.byId('filterselect1'), 'onChange', function () {
dijit.byId('filterselect2').store = new dojo.data.ItemFileReadStore(
{ url: "/test/autocomplete/id/" + dijit.byId("filterselect1").value }
);
});
});
The JSON is generated from what I can tell correctly from a Zend Action Controller using a autoCompleteDojo helper.
// Action Controller
public function autocompleteAction()
{
$id = $this->getRequest()->getParam('id');
$select = $this->_table->select()
->from($this->_table, array('id','description'))
->where('id=?',$id);
$data = new Zend_Dojo_Data('id', $this->_table->fetchAll($select)->toArray(), 'description');
$this->_helper->autoCompleteDojo($data);
}
I receive the JSON from the remote datastore correctly, but it does not populate the second FilteringSelect. Is there something else I need to do to push the JSON onto the FilteringSelect?
I couldn't believe this was causing the problem, but the whole issue boiled down to the fact that it appears that a dojo ItemFileReadStore REQUIRES the label property of the JSON to be "name". In the end this is all that it required to wire them together.
dojo.addOnLoad(function () {
dijit.byId('filtering_select_2').store = new dojo.data.ItemFileReadStore({url: '/site/url'});
dojo.connect(dijit.byId('filtering_select_1'), 'onChange', function (val) {
dijit.byId('filtering_select_2').query.property_1 = val || "*";
});
});
UPDATE: The property within Zend form has been fixed as of ZF 1.8.4
Try console.log() in the event to see if it is launched. Changing the store should work, however for other widgets like grid you have also to call refreshing methods.

Categories