I have a small controller and some basic data. Here is my code. I am not sure why when I click the link, my messages won't show. In the console, I get no errors at all. I consoled the variables, and they show up. For some reason, it doesn't work in the view. I am not sure what I am missing.
index.html -- navigation menu
<ul class="nav navbar-nav" ng-controller="menu">
<li class="active"><a href ng-click="showMessage('Home')">Home</a></li>
<li><a href ng-click="showMessage('Work')">Work</a></li>
<li><a href ng-click="showMessage('Contact')">Contact</a></li>
</ul>
<div class="container" ng-controller="menu">
<h1> {{ message }} </h1>
</div><!-- /.container -->
Controller
angular.module('website', [])
.controller('menu', function($scope) {
// show the message on click
$scope.showMessage = function(messages) {
$scope.message = messages;
console.log($scope.message);
return $scope.message;
};
});
If you define two times the ng-controller, both will have separated scope.
You need to put all usages of controller in a block:
<div ng-controller="menu">
<ul class="nav navbar-nav">
<li class="active"><a href ng-click="showMessage('Home')">Home</a></li>
<li><a href ng-click="showMessage('Work')">Work</a></li>
<li><a href ng-click="showMessage('Contact')">Contact</a></li>
</ul>
<div class="container">
<h1> {{ message }} </h1>
</div>
</div>
You have 2 separate instances of the menu controller and they do not share the same scope
When you update one of the scopes, the other has no knowledge of it. You can use a service to share data across controllers or change structure you are using implementing separate controller instances
Related
I would like to use logout list item in my navbar to use as action flask logout function. Didnt find a way either with < li> nor < a> in documentation, is it possible?
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="active">New Food Item</li>
<li class="active">Check date</li>
<li class="active">Calorie setup</li>
<li class="active">Logout</li>
</ul>
</div>
#app.route("/logout", methods=["GET","POST"])
def logout():
logout_user()
return render_template("login.html")
An action attribute on an li element doesn't make sense. You can use a link as in this answer:
<li class="active">Logout</li>
Your href was pointing to the index, your action is pointing to logout, and you're rendering the login template in your Flask route, so you'd need to decide which you want: render the login template or redirect to the index after hitting logout.
I've been messing around with Angular and have a simple test project with working however when adding in the module for ngGrid, everything just stops functioning.
A snippet of working HTML is:
<div class="navbar-header">
<a class="navbar-brand" ui-sref="home">{{hdr.title}}</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li ng-click="hdr.setIndex(0)" ng-class="(index==0) ? 'active' : ''">
<!--Contributions-->
<!--STATE directive-->
<a ui-sref="{{hdr.menu[0].state}}">{{hdr.menu[0].name}}</a>
<!--<a ui-sref="collections">{{hdr.menu[0].name}}</a>-->
</li>
<li ng-click="hdr.setIndex(1)" ng-class="(index==1) ? 'active' : ''">
<a ui-sref="{{hdr.menu[1].state}}">{{hdr.menu[1].name}}</a>
</li>
<li ng-click="hdr.setIndex(2)" ng-class="(index==2) ? 'active' : ''">
<a ui-sref="{{hdr.menu[2].state}}">{{hdr.menu[2].name}}</a>
</li>
<!--<li> {{hdr.title}}</li>-->
</ul>
</div>
The script contains:
angular.module('app', ['ui.router'])
The display fails when the script is updated to either of the following:
angular.module('app', ['ui.router','ngGgrid'])
angular.module('app', ['ngGgrid'])
Now instead of the page displaying properly, all that displays is:
{{hdr.title}} {{hdr.menu[0].name}} {{hdr.menu[1].name}} {{hdr.menu[2].name}}
The script file is being loaded with:
<script src="Scripts/ng-grid.js"></script>
Thanks in advance for any responses.
Another keyword search based on the response from K Scandrettt enabled me to locate another post that contained a resolution to my question.
I have four to five tab views in my app. So clicking on each tab I'll show content based on the tab selection.
I tried two approach one is ng-route and another one is ng-show/ng-hide. I feel ng-show/ng-hide is good at performance level and I think I should follow the same. Here is what I tried
First Approach ng-route
main.php
var testApp = angular.module("testApp", ["ngRoute"]);
testApp.config(function ($routeProvider) {
$routeProvider.when("/tab1", {
templateUrl: "tab1.php"
});
$routeProvider.when("/tab2", {
templateUrl: "tab2.php"
});
$routeProvider.when("/tab3", {
templateUrl: "tab3.php"
});
$routeProvider.when("/tab4", {
templateUrl: "tab4.php"
});
$routeProvider.otherwise({
templateUrl: "tab1.php"
});
});
testApp.controller('testContr',function($scope){
//controller statements goes here
});
<ul class="nav nav-pills">
<li class="active" role="presentation">Tab 1</li>
<li role="presentation">Tab 2</li>
<li role="presentation">Tab 5</li>
<li role="presentation">Tab 4</li>
</ul>
tab1.php
<div>
tab1 content goes here
</div>
tab2.php
<div>
tab2 content goes here
</div>
tab3.php
<div>
tab3 content goes here
</div>
tab4.php
<div>
tab4 content goes here
</div>
Second approach ng-show/ng-hide
main.php
var testApp = angular.module("testApp", []);
testApp.controller('testContr',function($scope){
$scope.view = 'tab1'// tab1 by default
$scope.setView = function($newView){
$scope.view = $newView;
}
//controller statements goes here
});
<ul class="nav nav-pills">
<li class="active" role="presentation" ng-click="setView('tab1')">Tab 1</li>
<li role="presentation" ng-click="setView('tab2')">Tab 2</li>
<li role="presentation" ng-click="setView('tab3')">Tab 3</li>
<li role="presentation" ng-click="setView('tab4')">Tab 4</li>
</ul>
<?php require_once 'tab1.php';
require_once 'tab2.php';
require_once 'tab3.php';
require_once 'tab4.php'; ?>
Content in those are listed in the main.php but on condition with ng-show
tab1.php
<div ng-show="view == 'tab1'">
tab1 content goes here
</div>
tab2.php
<div ng-show="view == 'tab2'">
tab2 content goes here
</div>
tab3.php
<div ng-show="view == 'tab3'">
tab3 content goes here
</div>
tab4.php
<div ng-show="view == 'tab4'">
tab4 content goes here
</div>
I see the benefits of partial view with ng-route, which is manageable chunk of code. Which I can achieve php include file(each file with separate view and include them all in main file) and ng-show.
My app doesn't need to care about URL Navigation as of now.
When I try the above two approach I see ng-show is faster and I can avoid ng-route.js file as well(reduces file load time).
Is there anything am I thinking wrong. Any suggestion on which to use?
In addition to what #DilumN has said, using ng-route also allows you to do deep linking (of sorts) into your tabs i.e. you can provide a URL to someone and that would open into the exact tab you want to point at.
Also, ng-route is meant for this task, as opposed to ng-hide/show which is meant to display: none content.
Last but not least, ng-route allows for easier tests (you're writing tests right? wink).
You can also separate out concerns using ngRoute, and in the end, this will prevent spaghetti code. If you come from a jQuery background, the ng-show method might look more intuitive, but the ng-route method ironically, is the more Angular way of doing this.
For this approach ng-show have some disadvantages as well. Because you are using ng-show to show hide tabs, when you load the page initially all those views will be loaded into your DOM & ng-show uses css show/hide to show content accordingly. If your content get bigger & bigger the HTML will also grow bigger.
And also if you want to handle separate controllers for each tabs one day, the better way is using separate ui-views for each tab.
For a simple static tab content ng-show is fine, but if you have a feeling that it will be more complex in future, my suggestion is to go for separate routes & controllers.
So at the end of the day decision is yours by thinking about the future growth of the project.
there is my html code for switch user to some pages in my php website
<div class="nav">
<ul onChange="showUser(this.value)">
<li class="active">
<div class="fix">
<span class="ico"><img src="image/ico7.png"></span>
<span class="value">manager</span>
</div>
<ul>
<li>chenge pass </li>
<li>search</li>
<li>exit</li>
</ul>
</li>
<li class="active">
<div class="fix">
<span class="ico"><img src="image/ico3.png"></span>
<span class="value">show user</span>
</div>
</li>
</ul>
</div>
it work good but i want to learn how can I transform between pages with ajax code, by click on a list item codes calling from page b and show in page a. so it will be faster than html code
how can i do it?
You can use .load function of jquery to load a page in a div like this
function LoadPage(url){
$('#yourMainDiv').load(url, function (response, status, xhr) {
//you can put you logic here
});
}
Here url will be url of page which you want to load in the div.
You will call it like
LoadPage('chengePass.php');
Or you can do like say in first answer but add href="#" onclick="LoadPage('chengePass.php');return false;"
link
or
<li onclick="LoadPage('chengePass.php');return false;">link</li>
I've got an unordered list using Bootstrap and Ember.js. Each list item is a link to display a new post, and whenever you click on the link, Ember adds the class active by default. I'm using Bootstrap nav-pills that turn blue when the class is active. However, Ember makes the link active whereas I'd like it to make the whole <li> active.
Here's my template:
<ul class="nav nav-pills nav-stacked">
{{#each post in controller}}
<li class="list-group-item">
{{#link-to 'post' post}}
{{post.title}}
{{/link-to}}
</li>
{{/each}}
</ul>
When you click on a link, the <li> looks like this:
<li class="list-group-item">
<a id="ember360" class="ember-view active" href="#/posts/1">
A great post
</a>
</li>
I know that it would be fairly trivial to add this functionality with jQuery, but is there a way to make the <li> active rather than the <a> with Ember or Handlebars directly? I tried putting the {{link-to}} around the <li> and that didn't do the trick.
You can change the link-to generated tag to <li> using tagName="li" option. And keep the <a> tag to just keep the bootstrap style:
<ul class="nav nav-pills nav-stacked">
{{#each post in controller}}
{{#link-to 'post' post tagName="li" class="list-group-item" }}
{{post.title}}
{{/link-to}}
{{/each}}
</ul>
See this in action http://jsfiddle.net/marciojunior/YLN5X/
I don't think there is any super easy way, I think the best way would be to extend the LinkView, and register a new helper, link-to-bootstrap, or something along those lines that added the class to the li element instead of the anchor element.
There is a really good project that already does this https://github.com/ember-addons/bootstrap-for-ember
There isn't a built-in way. The active class binding code is internal to link-to, and involves several not-easy-to-abstract pieces.
The best solution is to have the routes set the selected post in the postsController. This would look like:
setupController: function(controller, model) {
controller.set('model', model);
this.controllerFor('posts').set('selection', model);
},
Then you want to open the item controller for posts (PostController unless you set itemController to something different on PostsController) and do something like this:
selection: Ember.computed.alias("parentController.selection"),
isActive: Ember.computed.equal("model", "parentController.selection")
Then in your li:
<li {{bind-attr class="isActive:active :list-group-item"}}>