I don't know why (sure?) ng-view doesn't reload datas changed from controller. The code is like this:
$scope.reloadUserInfo = function() {
APIs.tot_of(null).then(function(result) {
$scope.tot_of = result;
APIs.info_of(null).then(function(result) {
$scope.info_of = result;
});
});
};
$scope.info_of is reloaded in all view but not in ng-view like this.
<div id="page-content">
info_of or other params are reloaded
<div ng-view>Here, using routes, info_of or other params aren't reloaded.</div>
</div>
I created a function that reload info at every refresh or change route, so if I change route the ng-view data reload but if I use ng-click, data doesn't reload in ng-view. Who know why? Thanks.
Update with plnkr:
http://plnkr.co/edit/R5fCJykwbm2q18Px4BrZ?p=preview
This happens because your ng-view directive creates a child scope. If you remove the controller in your route, or in your view display {{$parent.name}} then it will work.
Related
I am using Angular 1.3, creating views using ui-router and ui-view.
I have added the ui-view on index.html file, which has Menu, footer and in the middle ui-view for main content.
I have created whole application using states with $stateProvider.state('state_name')
Now I want to create a page with plain text, no html tags, just plaintext. But the problem is when I create route for that, it includes header and footer, which is correct behavior of Angular. But how can I create a view with no menu, footer included, just plain text which I will add in view file, with route. Any solution?
You can have a service that changes is bond to the main controller. The first answer to this question explains how this can be achived.
I've made a modified Plnkr example for your specific use case here
app.factory('Page', function(){
var visible = true;
return {
visible: function() { return visible; },
setVisible: function(state) { visible = state}
};
});
The factory called Page provides access to a visible variable for both the main controllers and the controllers inside the ng-views.
The aim is to change this visible variable in the controller in order to change the visibility of the main components outside of the ng-view.
function MainCtrl($scope, Page) {
$scope.Page = Page;
}
To this end we have a binding in the main controller that can access the page service.
<html ng-app="myApp" ng-controller="MainCtrl">
<body>
<h1 ng-hide="Page.visible()">Page Header</h1>
<ul>
<li>test1
<li>test2
</ul>
</html>
And in the html, we define that the ng-if is controlled by this visible variable in the MainContorllers Page.
function Test1Ctrl($scope, Page) {
Page.setVisible(false);
}
Finally, we can call the change visibility function from the other views in order to change the visibility of the headers and footers in the Main View.
In my ionic blank app, i have two html file index.html and category.html.
i write the controller for index.html in app.js like
.controller('AppCtrl',function($scope){
$scope.menu = function() {
console.log('yesytest');
window.location = "category.html";
};
})
this is working fine and after reaching the category page i create another controller in app.js
controller('categoryCtrl',function($scope){
console.log('ffffffffff');
$scope.beauty = function() {
console.log('yesytest');
window.location = "categorydetails.html";
};
});
i add a ng-click function on a button inside category.html but when i click on that button it is not calling the controller?
You can define your controller either on :
- defining it on your ui router state
.state('camera',{
url:"/camera",
cache: false,
controller:"CameraCtrl",
templateUrl:'app/views/loading/index.html'
})
Or by defining it into tour template category.html
<div ng-controller="categoryCtrl"> .... </div>
This is standard AngularJS feature, nothing special with ionic
If you use this :
.state('category',{
url:"/category",
controller:"categoryCtrl",
templateUrl:'templates/category.html'
})
You can use ui-sref="stateId" to do redirection
Example:
<a ui-sref="category"></a>
..Hi Kindly route your controller just define them..This might help.. --> http://learn.ionicframework.com/formulas/navigation-and-routing-part-1/ ^_^
//app.js
.state('category',{
url:"/category",
controller:"categoryCtrl",
templateUrl:'templates/category.html'
})
//index.html
<a ng-href="#/category"></a>
in currently using angular-ui-router in my angularjs app. With main routes triggered from ui-sref directive in the top nav. How can I refresh a route even if I'm clicking on the current route.
Also if I'm in a subroute, then I want to refresh the view with the main route view.
Do I move this navigation into a custom function called upon ng-click?
So what I did was to create function within my controller:
$scope.navigateTo = function(stateName){
if($state.current.name == stateName){
$state.go($state.$current, null, { reload: true });
}else{
$state.go(stateName, {inherit:false});
}
}
this was then called from within my html via my ng-click directive:
ng-click="navigateTo('appname.resources')"
I've been playing with UI-Router since ngRoute doesn't quite cover what I needed based on my different layouts requiring multiple nested views. What I can't figure out in UI-Router is how to load default nested views without having to click a link. I created a crude example of what I'm mean in a plunker
Essentially there are two main route within each there is a container which hosts nested views. I want to load a default view into them without have to click a ui-sref.
<h1>Auth Panel</h1> <-- main route 1
Just a container for login/forgot/reset
<hr/>
<a ui-sref="auth.login">Show Login</a><br> <-- can click to load nested view, but want to autoload
How to show automatically /login within the panel <br>
without having to click show login?
<div ui-view></div> <-- child to autoload with /login
Thanks
On your parent state add a param
.state('parentState', {
//...
params: {
autoActivateChild: 'parentState.childState'
}
//...
})
And add this somewhere
$rootScope.$on('$stateChangeSuccess', function(event, toState){
var aac;
if(aac = toState && toState.params && toState.params.autoActivateChild){
$state.go(aac);
}
});
If you wanted to navigate automatically to a default child state when the parent loads, you could trigger a click on that particular ui-sref in your controller.
angular.element("#childElementId").trigger('click');
What's the best way to direct a user to the home page if they happen to refresh from any other route (or state if you're using ui-router, as I am).
For example - I want them to begin on the inventory page. If they want to make edits, they travel to the edits page, but if they refresh that page, they go straight to the inventory route again.
I havn't used the ui-router but in ng-route we can do it like this
create a controller on top of your ng-view div
<body ng-controller="topController">
<div ng-view></div>
</body>
Define your routes normally but in topController just write this line
$location.path("/")
assuming that "/" is your main page where you want to redirect after refresh, don't forget to define $location
window.onbeforeunload = function()
{
window.setTimeout(function () { window.location = 'homeURL'; }, 0);
window.onbeforeunload = null;
}
Assume that #/inventory is your route, use otherwise
$urlRouterProvider.otherwise("/inventory");
See URL Routing - $urlRouterProvider