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();
Related
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.
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.
I want to load my page based on default item selected in the combobox and reload on changing selected item (knockout).
Currently what I am doing is loading the form on click of a button. Here is my code. Please suggest me as I am very new to knockout.
html:
<select data-bind="options : employeeList, optionsText : 'name', value : selectedEmployeeList"></select>
</span>
<button class="toolbar-button" data-bind="click : load, disable :loading">Load employee</button>
js:
var filterVM = function () {
this.employeeList = ko.observableArray();
this.selectedEmployeeList = ko.observable();
};
dataService.getEmployeeLists(this.viewData.EmployeeId).then(loadEmployeeLists).then(enableControls);
filterVM.prototype.load = function () {
var selectedEmployeeList = this.selectedEmployeeList();
var self = this;
if (selectedEmployeeList) {
disableControls();
dataService.getEmployeeByEmployeeList(this.viewData.employeeId, selectedEmployeeList.id)
.done(loadPEmployeeSpread);
}
};
You can call your load function on change of selected value selectedEmployeeList
Add following code in constructor
this.selectedEmployeeList .subscribe(function(newValue) {
//This function is going to get called on every change of the selectedEmployeeList
//Add here your code to load the page
}, this);
subscribe :- is facility provided by knockout that it tracks every change made in the subscribed variable and calls function on every change.
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 :-)
So here I have two views addBook and showBooks , the idea is, as I click on a button it should add a book name and author to the DOM its an , and I should be able to click it. But the problem is for each element more than one event handlers are added. that is for each new inner view more than one click events are added, I am quite new in backbone and I am still in Dark
here is my code , first the outer view
var addBook = Backbone.View.extend({
el : $('#addbook'),
model : bookmodel,
template : _.template(addbookTemplate,{}),
initialize : function(val){
this.el.html(this.template);
bookcollection.bind('add', this.showOff)
},
render : function(){
},
events : {
'click #addbookbutton' : 'addHandler'
},
addHandler : function(){
var book = new this.model;
book.addValues($('#bookname').val(), $('#bookauthor').val());
bookcollection.add(book);
},
showOff : function(buk){
this.xx = new showval({model: buk});
$('#fatman').append((this.xx.render().el));
}
});
return addBook;
Now the second and inner view
var showbooks = Backbone.View.extend({
events : {
'click .individual' : 'deleteHandler'
},
initialize : function(values){
_.bindAll(this);
/*if(values){*/
//return this.template;
//}
//values = (values == "") ? {} : values;
this.el.append(this.template);
},
render : function(){
this.el = _.template(show, {name : "Max", author : "jk"});
this.delegateEvents();
return this;
},
deleteHandler : function(e){
alert("this kills me")
}
});
return showbooks;
Now here is the problem as I click the button is added to DOM button but for each new li one more alert is fired ... Help is highly appreciated , I know I am missing some crucial point .. !!
I have taken your code and changed it slightly. I have created 2 Backbone.View's, one as the container and one for book items. It's crude, but hopefully will give you an idea of where you have gone wrong. http://jsfiddle.net/cQEu2/