i have angular behaviour outside a ng-view. how can i get open a new page
where that view is then located in?
<div ng-controller="JobCtrl">
<input type="hidden" ng-model="produktion" value="produktion">
<ul>
<li ng-repeat="job in jobs | filter:produktion">
{{job.name}} (Hamburg)
</li>
</ul>
</div>
Onclick i would like to get the details rendered on a complete different page in my webapp.
how can i achieve this?
here is my url mapping for now:
when('/jobs/:jobId', {templateUrl: 'partials/job-detail', controller: JobDetailCtrl}).
if you need more code, pls let me know
Although I don't think I completely understand your requirement, but You need to add another route and in the new route's template use can you the behavior....
I am not sure if this answers you question. If not, put up the code on jslint or plunker etc
Related
I am making a simple angularJS application and pretty new to it. I have a menu like this
home login
I want the login to change to logout if the user has successfully loggin in. I have implemented the login (psuedo implenation), the probem I am facing is, my menu is at the top out out '
I looked at this question AngularJs, change menu item whether user is connected or not but I could not get my problem solved with it.
How do I fix this? My controller for home looks like this
scotchApp.controller('mainController', function($scope, user) {
// create a message to display in our view
$scope.isUserLoggedIn = user.getSession();
$scope.message = 'Everyone come and see how good I look!' + user.getSession();
$scope.submit = function(){
alert('Thank you. Request is sent successfully');
$('#SupportModal').modal('hide');
};
});
where user is FactoryService. That part is working fine. Any help is appreciated.
If I show {{isUserLoggedIn}} value next to menu it always show false, which is the problem. But if I put that in home.html, it show correct value. The problem is I can't build the logic with {{isUserLoggedIn}} in the menu.
I would recommend you to use ui-router.
It provide nested views and will help you a lot with this issue.
Here is a quick example(in plunker) of how to use it in your case (really simplified) :
Here is how your states should look :
$stateProvider
.state('app', {
templateUrl: 'head.html',
controller: 'HeadCtrl',
})
.state('app.feature1', {
url:'/feature1',
templateUrl: 'feature1.html',
controller:'FeatureCtrl'
})
And your differents HTML files :
Index.html (just showing the body part) :
<body ng-app="testApp">
<ui-view></ui-view>
</body>
Head.html :
<div>
<div class="header">
You are currently <span ng-show="user.connected">connected</span><span ng-show="!user.connected">disconnected</span>
</div>
<ui-view></ui-view>
</div>
feature1.html
<div class="page">
<div>
I am Bill <button ng-click="connect()">Connect as Bill</button>
</div>
<div>
I am Steve <button ng-click="connect(1)">Connect as Steve</button>
</div>
<div>
<button ng-click="disconnect()">Disconnect</button>
</div>
</div>
What you need to understand is that if you reach the "/feature1" url, you will be in state app and its substate feature1 (state app.feature1)
The first ui-view will be filed by app state's template. The ui-view in the template will be filed by feature1 state's template.
I know this is a bit unclear, but try to follow a "gettting started" guide and this exemple should help you a lot.
Hope it helped
I've a fiddler to show my setup.
http://jsfiddle.net/smartdev101/dt6kkyy3
The problem is the routeController function is getting called only once on the page load, but then on hash change (as a result of link click), the function routeController is not getting called again.
I've my links generated in another ng module, not sure if the links have to be with in the same module as the router.
<div id="router">
<div ng-view></div>
</div>
<div id="navigation" data-ng-cloak>
<ul id="folios" data-ng-controller="FoliosController" class="nav nav-pills nav-stacked">
<li data-ng-repeat="folio in folios" ng-class="{active: isActive('/search/{{folio.productId}}')}">
{{folio.title}}
</li>
</ul>
<div ui-view></div>
</div>
Edit:
Problem has been further diagnosed. Any list/anchor that was generated by an ng controller, is not responding to hash changes outside the scope, while the static links are. from the plunkr link, "foo" and "bar" clicks trigger the controller but "abc" and "def" are not. please review. Question is how to make "abc" and "def" (dynamic links) respond to changes as well.
http://plnkr.co/edit/ea1OHa?p=preview
The code is behaving as intended with the way you have it coded. You are calling routeController in the constructor of the controller, but its not being invoked anywhere else (the router isn't going to do that either).
If you need the routeController function to be invoked on every route change consider binding to route changing events:
https://docs.angularjs.org/api/ngRoute/service/$route
Take a look at this plunk. Note I am binding to stateChangeSuccess instead since you are using the ui-router instead of ngRoute.
http://plnkr.co/edit/CiYLqnqAzrXoouMSXkuk
I have a page where there are few tabs and I use angular+bootstrap.
I use angular.bootstrap initially.
Then I have another controller for showing different set of data in one of the tabs. when I try to use angular.bootstrap again, I get the error it cannot be bootstrapped twice. To make it simple, consider the following code.
<div id="mainpage" ng-controller="mainPageController">
<ul>
<li id="test1"> <a href="gototest1"> GoToTest1 </li>
<li id="test2"> <a href="gototest2"> GoToTest2 </li>
</ul>
</div>
<div id="gototest1">
this is some sample. I have another html page here which will be loaded as a tab
</div
The page for gototest1 looks like this
<div ng-controller="gototestcontroller>
Here comes the another widget from another controller and
I try to use angular.boostrap here again. And I get the error because it is already bootstrapped in mainPage
</div>
What is the best way to use angular.bootstrap here?
Angular bootstrap is used to manually initialize an Angular the document or an element.
https://docs.angularjs.org/guide/bootstrap
Angular cannot be initialized more than once on an element. Is there a reason you don't use automatic initialization, using ng-app?
It sounds like you could benefit from using the module ngRoute and applying the attirbute ng-view instead of trying to bootstrap twice.
https://docs.angularjs.org/api/ngRoute
Having this route in Laravel:
Route::get('post/{id}/comments','PostCommentsController#showComments');
I'am trying to access it from an anchor html tag href attribute in a php view which works with angular to render a list of items. This is a piece of code from this view (_post_content.php):
<ul class="media-list" >
<li class="media" ng-repeat="item in items" >
<div class="media-body">
<div class="row">
<div class="col-sm-9"><h5 class="media-heading">
{{ item.title }} </h5></div>
</div>
</div>
</li>
</ul>
The new view made by the controller PostCommentsController in the method showComments, is similar to _post_content.php but it shows comments by a post id (item.id in ng-repeat).
However, for other links all over the application, even in its main layout: navbars and logo anchors, image anchors, etc; its url's are prepended by the path /post/4/comments.
For example if i click in the item 4 of _post_content.php, a link called blog in the left nav bar in the main layout, shows this as url: /post/4/comments/blog
Of course this route does not exists and breaks all the application.
Please, any clue to solve this strange behavior? Is it possible angular is causing it, though i'm not using angular routes?
Thanks for your help.
If you are using relative paths for your other links, you should prepend them with a forward slash, so instead of:
<a href="blog">
your should have:
<a href="/blog">
That way the links will be relative to the root not to the current path (which in your case is /post/id/comments).
As an alternative you could also use the base meta tag, by including this in your pages' <head>:
<base href="http://yourdomain.com/">
But be aware that there are some side effects to using base which might affect your application. Read this for more info: Is it recommended to use the <base> html tag?.
this is my basic scenario. For a list of items (summary view) i want to show details view of item that got clicked on the same page.
I took this jsfiddle example and transformed it into this jsfiddle. If you look at the behavior it does work for first time but it is not consistent.
Maybe someone can help me with this, or suggest a better approach. I would like to have a different controller for managing the list and a different controller to handle the detail view.
One way of transforming the example (provided that you want to use ngSwitch) would be:
<ul ng-controller="ListController">
<li ng-repeat="item in items" ng-controller="ItemController">
<div ng-click="open(item)">{{item.content}}</div>
</li>
<hr>
<ng-switch on="anyItemOpen()">
<div ng-switch-when="true">
<div ng-controller="ItemController">
{{opened.name}}: overlay: tweet, share, pin
</div>
<a ng-click="close()">close</a>
</div>
</ng-switch>
</ul>
And here is the working jsFiddle: http://jsfiddle.net/pkozlowski_opensource/sJdzt/4/
Your jsFiddle didn't work since you were trying to reference item created in the ngRepeat scope (and thus not available outside of the ngRepeat).