I am displaying a list of host in the table under "hostController" controller. ClusterController is parent of hostController. Host is a tab inside Cluster view. Call for getting host should be done only when the cluster list is available(which is called when the dropdown on cluster view is clicked). So even if we have selected host tab, the host list call should not be fired and hence the host list should not be displayed(as cluster list is not available). But if we have selected host tab, and then we clicked the dropdown of cluster view to get the cluster list, the host list should be displayed. But its not happening so. The host list gets updated but the same changes is not displayed in the UI.
The dropdown in Cluster view which will call getClusterList() and will update the showNavContent poperty. The host list should be displayed only when showNavContent property is true. I am compiling the hostController again inside the clusterController, so the function getHostList is called and updated the hostVm.hostList property but on the UI it is not reflected.
//ClusterController
function clusterController($scope, $controller, $rootScope) {
var vm = this,
hostVm;
$rootScope.showNavContent = false;
function getClusterList() {
clusterStore.getClusterList().then(function(data) {
$rootScope.showNavContent = true;
hostVm = $controller("hostController as hostVm", { $scope: $scope});
});
};
//HostController
app.controller("hostController", hostController);
function hostController($scope, $rootScope, $state, $stateParams, hostStore, tabManager) {
var vm = this;
vm.getHostList = getHostList;
vm.activeTab = tabManager.getActiveTab();
vm.hostList = [];
init();
function getHostList() {
hostStore.getHostList().then(function(data) {
vm.hostList = data.data;
console.log(vm.hostList);
});
}
function init() {
if($rootScope.showNavContent === true) {
vm.getHostList();
}
}
}
//host.html
<div class="flex-table">
<div class="ft-row" ng-repeat="host in hostVm.hostList">
<div class="ft-column">
<div class="host-name">{{host.name}}</div>
<div>{{host.ip}}</div>
</div>
</div>
</div>
Related
i'm doing a crud like a phone list,
in a view i want to add persons to my list, and in another view i want to show that peoples,
for do that, i'm using two controllers, and a service to store my array with the persons.
to add peoples i'm using set way to pushing it to array when i click on a button and thats works fine(possible to see with console.log at salvar function in service).
My problem is, when i go to show the list with the get method after added some persons with set, the get method still returning my list like she starts (empty). how i can fix this?
angular
.module('moduloLista')
.factory('addMostrarService', addMostrarService);
function addMostrarService() {
var listacontatos = [
];
var salvar = function(obj){
listacontatos.push(obj);
};
var getLista = function(){
return listacontatos;
};
return{
salvar: function(obj){
salvar(obj);
},
getLista: function(){
return getLista();
}
}
}
^ Service Code
angular
.module('moduloLista')
.controller('testeController',testeController);
testeController.$inject = ['addMostrarService'];
function testeController(addMostrarService) {
var vm = this;
vm.dadoslista = addMostrarService.getLista();
console.log('vm.dadoslista');
}
^ controller to get the list from service.
By clicking the link i change view, this re-instantiating my controller. This is why the activeMenu is empty. If icreate a service and store the currently active menu in there, it won't be empty.How can i create service to do that? This is my first time that i need to create service?This is my plnkr... http://plnkr.co/edit/gJko3umteXXEye7o9StR?p=preview
Problem is when user click on menu from layout then this re-instantiating my controller
Layout:
<li class="dropdown">
<ul class="submenu">
<li>#Translate("MY_ACCOUNT")</li>
<li ng-click="GetLoader();">#Translate("SETTINGS")</li>
<li ng-click="GetLoader();">#Translate("TICKET_HISTORY")</li>
<li ng-click="GetLoader();">#Translate("TRANSACTIONS")</li>
<li ng-click="GetLoader();">#Translate("BONUS_ACCOUNT")</li>
<li>#Translate("ODDS_REPRENSETATION")</li>
<li>#Translate("HELP")</li>
<li>#Translate("LOGOUT")</li>
</ul> </li>
You can do it like this:
app.service('navigation', function () {
this.activeLink = '';
});
app.controller('MainCtrl', function($scope, navigation) {
$scope.activeMenu = 'Home';
$scope.activeLink = navigation.activeLink;
$scope.changeActiveLink = function(link) {
$scope.activeLink = link;
this.activeLink = link;
}
});
The service is a singleton, it's intatiaded once per you application load, so it will keep the assigned value between diffent states of your app.
You can make it a bit smarter if you won't store a simple string value but an object - this way we'll be able to keep the reference to the service's value rather than the value itself and we won't need to set both $scope.activeLink = link; and this.activeLink = link; explicitly:
app.service('navigation', function () {
this.active = {
link: '',
menu: 'Home'
};
});
app.controller('MainCtrl', function($scope, navigation) {
$scope.activenav = navigation.active;
$scope.changeActiveLink = function(link) {
navigation.active.link = link;
}
});
(just remember to make necessary changes in your html code in that second case)
This is my first html page where I need to populate my recently added data:
<div>
<!--I have binded busdomain through controller -->
<swt-tree tree-data="busdomain"</swt-tree>
</div>
This is my child html page which is called under first page and I want to pass the values entered on this page to my parent page. But not getting recent values until I reload the page.
<span ng-show="true"</span>Name</label>
<div class="col-sm-9">
<input focus="" id="name" placeholder="Name" ng-model="busdomain.name" ng-change="domainNameChanged()" required="true">
</div>
<button type="submit" ng-click="addSubTree(createdomain.$valid)" id="btnData">OK</button>
This is my controller, I have called service through controller:
controller('domainController', ['$scope', '$state', 'DomainNameService', function($scope, $state, DomainNameService) {
$scope.activeTab = 1;
$scope.currentBDStatement=[];
$scope.statements=[];
$scope.childBD =[];
$scope.busdomain=[];
<!--It is used when I navigate from parent to child for the first time -->
$scope.busdomain = DomainNameService.getBusDomainName();
$scope.addSubTree = function(val){
//Done some code here
//In $scope.statements I am getting the values which I need to pass on html page
//I am setting the value in service which I got from my child html page
DomainNameService.setBusDomain($scope.statements);
//Here I am calling the get method of my service and able to get the values which i have set.
$scope.busdomain = DomainNameService.getBusDomainName();
//Redirecting to my parent page here I want to show the values which i have set in $scope.busdomain but I am not getting recent added values..
$state.go('BusDomainTree');
}
This is my service.js:
Here I have used getter and setter:
app.factory('DomainNameService', function() {
var busDomain = undefined;
var busDomainValue=[];
setBusDomain:function(busDomName){
this.busDomainValue=busDomName;
},
getBusDomainName: function(){
<!--I am getting the values here which I need to pass to html page -->
return this.busDomainValue;
}
})
Full controller code:
controller('domainController', ['$scope', '$state', 'DomainNameService', function($scope, $state, DomainNameService) {
$scope.activeTab = 1;
$scope.currentDomain = {};
$scope.currentBDStatement=[];
$scope.statements=[];
$scope.childBD =[];
var statementTree = {};
$scope.busdomain=[];
$scope.domain = DomainNameService.getDomainName();//Getting parent name here
$scope.busdomain = DomainNameService.getBusDomainName();
//$scope.busDom = DomainNameService.getBusDomainModel($scope.statements);
$scope.addTree = function(isValid) {
if(isValid) {
var stType = $scope.domain.name;//Getting value from html page of parent
$scope.currentDomain = $scope.getNewDomain(stType,varType);
$scope.statements.push($scope.currentDomain);
//Adding parent name to tree code $scope.statementTree.setNewInput($scope.statements);
$scope.isAdd = false;
DomainNameService.addDomain($scope.domain.name);
$scope.domain.domainName = DomainNameService.getDomainName()[0];
$state.go('DomainTree');
}
}
$scope.getNewDomain = function(stType,varType) {
//passing parent name as json
return {domainNode:[{name:stType}],name:stType, varName:varType};
}
$scope.addbusinessDomain = function() {
$state.go('DomainTree.businessDomain');
}
//This method is called for child
$scope.addSubTree = function(val){
var varType = "busDomain";
var domain=[];
var busDomainName=$scope.busdomain.name;
var parent = DomainNameService.getDomainName()[0];
DomainNameService.addChildBD(busDomainName);
$scope.childBD=DomainNameService.getChildBD();
$scope.currentStatement = $scope.busdomain.name;
$scope.currentBDStatement.push($scope.busdomain.name); $scope.currentDomainName=$scope.getBusDomain($scope.childBD,parent,varType);
$scope.statements.push($scope.currentDomainName);
$scope.statementTree.setNewInput($scope.statements);
DomainNameService.setBusDomain($scope.statements);
$scope.busdomain = DomainNameService.getBusDomainName();
$state.go('BusDomainTree');
}
$scope.getBusDomain = function(stType,parent,varType) {
return {node:[{name:parent}],name:parent, childNode:stType, refType: varType};
}
I am able to fetch values from service but I am not able to populate the recently added value to html page. For that I need to reload the page. Please some one help me out in resolving this issue. Thanks in advance
I am building a small message system. I use tabs in my state (inbox, outbox). Also, i want to sent a message when i click a "contact" link. If i click that link, this should happen:
change state to messages state
open other tab, called "newmsg"
At this moment, this is what i have:
<a ng-click="mailContact()">contact</a>
and i my controller:
$scope.mailContact = function() {
$state.go('root.messages');
$scope.openTab('new');
};
Obviously this is not working, because $scope.openTab('new'); will never execute. The state changes to what i want, but the tab is not opened. I do not have a clue of how to get it done.
Ok, stupid thing was i had an init which opened the "inbox"...
Now i wrote a service which does the trick.
app.factory('msgTabService', ['$rootScope', function($rootScope) {
var msgTabService = {};
var tabname = "inbox";
msgTabService.set = function(tab) {
tabname = tab;
};
msgTabService.get = function() {
return tabname;
};
msgTabService.openTab = function(tab) {
if ($rootScope.currenttab !== tab)
{
$rootScope.currenttab = tab;
msgTabService.set(tab);
}
};
return msgTabService;
}]);
The question may be similar to: Save State of Tab content when changing Route with angularjs and BootStrap Tabs
I just give a try to AngularJS. I try to do something quite simple but I'd like to do it the good way.
I got a list of items in a table which displays name and quantity for each item.
I have a form under the table.
When I click on an item name from the table I'd like the given item to be updatable through the form.
I achieve to do thing with scope inheritance as in fiddle http://jsfiddle.net/5cRte/1/
View :
<tr ng-repeat="item in items">
<td>{{item.name}}</td>
<td>{{item.quantity}}</td>
</tr>
Controllers :
function ItemListController($scope){
$scope.items = [{name:'item1', quantity:10}, {name:'item2', quantity:5}];
$scope.selectCurrentItem = function(currentItem) {
$scope.currentItem = currentItem;
}
}
function ItemFormController($scope){
$scope.$watch('currentItem', function() {
$scope.item = $scope.currentItem;
});
}
But has I read in some topics, it is not a good practice to couple controllers scopes this way, and preferably I'll wan't to use a service to store variables shared between controllers.
I was able to put a static variable in a service and retrieve it in another controller, but I can't make it updated when clicking on the item from the table, as watch not working on services variable. Have you an hint, for this ?
Thanks in advance
I don't know whether this is optimal but this what I could come up with
angular.module('myApp', []);
angular.module('myApp').factory('myService', function(){
var items = [{name:'item1', quantity:10}, {name:'item2', quantity:5}, {name:'item3', quantity:50}];
var current = {};
return {
getItems: function(){
return items;
},
setCurrentItem: function(item){
current.item = item;
},
removeCurrentItem: function(){
delete current.item;
},
getCurrent: function(){
return current;
}
}
});
function ItemListController($scope, myService){
$scope.items = myService.getItems();
$scope.selectCurrentItem = function(currentItem) {
myService.setCurrentItem(currentItem);
}
}
function ItemFormController($scope, myService){
$scope.current = myService.getCurrent();
}
Demo: Fiddle