i created one index page which have "NavigationController" and bind the menu on index page. when i redirect to new page controller and inject it "NavigationController" to bind latest menu on next page but it always display old menu. when i refresh the page then it loads nice with new menu.
<nav class="static-sidebar" role="navigation">
<ul ng-controller="NavigationController" id="sidebar" ng-init="!layoutLoading">
<li ng-repeat="item in menu" ng-include="'templates/nav_renderer.html'" ng-show="{{item.hasRights}}" ng-cloak></li>
</ul>
And Controller with my factory method which return meun is :
$scope.menu = GetHttpRequest.GetMenu();
Now, I Add into Another page i.e
<div ng-controller="NavigationController"></div>
but this not load latest menu untill i refresh the page
so , can you help me in this?
{{}} not needed in ng-show.
Use ng-show="item.hasRights" instead of ng-show="{{item.hasRights}}"
If it works after refreshing it means that it is something with loading order in your site. Check if you have correct order of loading, like: vendor lbirariers -> your libraries -> (...) -> your controller
also check your dependency injection headers in js files, cause you might skipped something
Related
I have a lot of html pages, and decided to use their names (which are short and unique) as id, so when i want click to one row of table, the id (which is the name of file) is passed to templateURL. For example,
app.config(function($routeProvider) {
$routeProvider
.when("/post/:id",
{
title: 'Disease',
templateUrl : "/pages/posts/:id.html"
})
For example, i have Treponema.html, HeartDisease.html, LungCancer.html etc in a list. When I click one, it should show its content on the right side of page, on which i have declared:
<div ng-view></div>
And when i click one listed item, i will take their id as the name (HearDisease, LungCancer) and put it in templateUrl.
<div id="HeartDisease"
onclick="window.location.href ='/post/'+this.id+'.html';>
<p>HeartDisease.html</p>
</div>
I think that the more appropriate for your use case will be to use ng-include. Look at the bottom of the page you have an example.
If you want to update the route in browser you can do it in your controller using the $location object.
I'm new to angularjs and have been scouring for an answer to this problem but to no luck I can't find one.I know that angular (1.x) is older but I still wanted to learn this anyway.
Moving on, I'm trying to dynamically generate links based on a $scope.menu_item object inside a controller of my module. For example if
$scope.menu_items = ['Home','Profile','Settings']
the values in the array correspond to child states of parent state User and is configured using $stateProvider.state()
$stateProvider
.state('user'{
url:'/user',
abstract:true,
templateUrl:'someTemplateThatSeemsToWork',
controller:'MenuCtrl'})
//these are the child states
.state('user.Home',{
url:'/home',
template:'<p>Home</p>' (this is loaded in the template of its parent)
})
.state('user.Profile',{
url:'/profile',
template:'<p>Profile</p>'
})
.state('user.Settings',{
url:'/settings',
template:'<p>Settings</p>'
})
then this in the template using ng-repeat:
<li ng-repeat="menu_item in menu_items">
<a ui-state="user.{{menu_item}}">{{menu_item}}</a>
</li>
As expected, it renders the view properly, the values from $scope.menu_items are properly made into links but the href="" attribute of the tag is equal to the current url.
The default state is 'user.Home' and as such /user redirects to /user/home
(localhost:[port]/user/home)
<a ui-state="user.Home" class="ng-binding" href="/user/home">Home</a>
...
<a ui-state="user.Profile" class="ng-binding" href="/user/home">Profile</a>
...
<a ui-state="user.Settings" class="ng-binding" href="/user/home">Settings</a>
Here we see that all of the generated tags have the href value set to the current url (localhost:[port]/user/profile will make it into href="/user/profile")
So is there anything that I'm forgetting to do? From my understanding, it should work when I use ui-state since it can handle $scope properties.
Some additional notes:
1.) Manually typing the specified state url in the address bar works just fine and renders the correct template
2.) I am using Express to handle the server-side
3.) I set $locationProvider.html5Mode(true)
Temporary Work-around
For the people who might stumble upon this question, I temporarily used a work-around solution and just removed ui-sref="" or ui-state="" and just used
ng-href={{state.url}}
with
ng-repeat= "state in states"
where
states = [{name="stateName", url="/relativeToRootUrl"},{..more States}]
I'd still appreciate a solution for this using ui-sref since it utilized ui-router more.
Currently, I'm linking to a specific sections within my angular view page landing.html. I want to link to the same sections from my angular view page faq.html. Can someone assist me on how to accomplish this?
PS I'am using Angular 1.5.8
<ul>
<li class="dropdown navbar-user">
<a onclick="$('#innerScrollableContent').animate({ scrollTop: $('#engine').offset().top}, 'slow');">
</ul>
You can make a master view then add the common codes as you mentioned in the master html.
Then load the other pages into that view.
Or use ng-view to load these views to your page.
otherwise create a template and call that template in every page
as
<div ng-include src="template.url"></div>
Check the jsfiddle for implementing ng-include
http://jsfiddle.net/mrajcok/MfHa6/
I've noticed a strange behavior of ng-include -- it is causing a strange side effect on the browser in some cases.
Here is a page, that contains a simple twitter bootstrap tab pane
<body>
<ul class="nav nav-tabs">
<li class="active">Tab 1</li>
<li>Tab 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">AAA</div>
<div class="tab-pane" id="tab2">BBB</div>
</div>
</body>
Now, if I add ng-include anywhere in the page, for example at the beginning of the page:
<body>
<ng-include src="'page1.html'"></ng-include>
...
It doesn't matter what the included file contains, it can be even empty, but this will cause each click when switching tabs to add #/tab1, #/tab2, etc. to the page URL. This happens in all browsers, which is undesirable. On Chrome, this also causes the tab icon to flicker, and for a moment it shows default white icon before it reloads the page specific icon.
Anyone experienced something similar? Why adding ng-include would cause this?
I also tried doing the include without angular (by using jQuery.load()) and there is no issue seen.
This can be fully experienced on a standalone page, but on this plnkr page I created, although one cannot see the URL, and the flicker effect in Chrome is less visible, but still the effect can be seen in Chrome.
The url changing behavior come from the $location service, which is used by ng-include. So you could be able to reproduce it by just injecting the $location service somewhere in your app.
See the What does it do? section of this $location guide, and the action that causing the problem is:
Maintains synchronization between itself and the browser's URL when the user clicks on a link in the page
This answer your question "Why adding ng-include would cause this?".
To prevent the url from changing by the $location service, you could do it like this:
appModule.run(function ($rootScope) {
$rootScope.$on('$locationChangeStart', function ($event, newUrl, oldUrl) {
// may add some logic here to prevent url changes only that come from clicking tab.
$event.preventDefault();
});
})
Example plunker: http://plnkr.co/edit/4289uwL1mHSRj6oP4dl1?p=preview
Hope this helps.
I'm having a problem on how to load a dynamic view using Angularjs in anchor tags. By the way I can't use ng-view since ng-view can only be use once in a template. So I'm thinking of using the ng-src but on the sample docs it is using a select element tag and fetching its values to the controllers. What I want is when I click a link say the View1, the content of my div will change. I will explain further.
Say I have this 3 anchor tags
<li>View1</li>
<li>View2</li>
<li>View3</li>
Before
<div data-ng-include="" data-ng-src="default.html"></div>
Now when I click #/view1
//the ng-src of the html will change depending on the link clicked
<div data-ng-include="" data-ng-src="view1.html"></div>
Perhaps you are trying to do something as below:
HTML:
<!-- Dont use # in the hrefs to stop the template from reloading -->
<li>View1</li>
<li>View2</li>
<li>View3</li>
<div data-ng-include="selectedTemplate.path"></div>
JS:
$scope.selectedTemplate = {
"path":"view1.html"
};
ng-view is the main view of any Angular app, and is affected by the route changes. So all you anchor tags will only affect the ng-view template.
To load other partial views based on the main ng-view, ng-include is the correct way to go as you have mentioned already.
To load a view based on the main view (view shown in ng-view), you need to write mapping logic which depending upon the main view should load other partials (ng-include elements for page).
So your partial becomes like
<div data-ng-include='templateNameVariable'></div>
This variable has to be set whenever the ng-view changes on location change.
You can watch for $route $routeChangeSuccess event and change the templateNameVariable based on the active route (hence the view).
So there should a controller out side the ng-view directive which will orchestrate this, and you would do
$scope.$on('$routeChangeSuccess',function(event,current,previous) {
//Change the templateNameVariable to point to correct template here, based on current route.
});