I am using angular JS with angular-route and ui bootstrap to build a form with dropdownlist.
My problem is thaht when I put the ui-bootstrap dropdownlist component inside an ng-view, the component is not working as supposed, whereas when I put it outside of the ng-view it is working correctly.
For me it comes from the fact that the data binding is not working well but I didn't manage to find why.
Code is more explicit than words : see here on plnkr
<html>
<head>
<script data-require="angular.js#1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script data-require="angular-route#*" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
<link data-require="bootstrap-css#3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script data-require="bootstrap#3.3.6" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-app="routeApp">
<h1>Hello Plunker!</h1>
<nav>
Page d'accueil
Page de contact
</nav>
<div ng-view></div>
<div ng-controller='DropdownCtrl'>
<div class="btn-group" uib-dropdown is-open="status.isopen">
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
{{button}} <span class="caret"></span>
</button>
<ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button">
<li role="menuitem">
{{action}}
</li>
</ul>
</div>
</div>
</body>
</html>
You will see that the Button dropdown is working well outside of the ng-view but will not work any more inside the ng-view.
Thanx in advance
The problem is you are using href=# on the links. Remove the # and it works fine.
Since angular routing is using hash based routes the # is causing a route change attempt
DEMO
Related
I got a list generated using angular 'ng-repeat', and I want if one item is clicked it will pop a popover to show some info. I tried several time but seems it doesn't work fine.
see plunker
a list demo in plunker
my code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" charset="UTF-8" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script data-require="ui-bootstrap#0.4.0" data-semver="0.4.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.min.js"></script>
<script src="controller.js"></script>
</head>
<body>
<div ng-app="my-app" ng-controller="controller">
<div class="row">
<div class="col-xs-12" style="text-align:center;">
<h2>Here is a list a weapons</h2>
</div>
</div>
<div class="row">
<div class="col-xs-12" ng-repeat="item in weaponItems" ng-click="selectItem()" uib-popover-template="'popover.html'" popover-append-to-body="true" popover-trigger="none" popover-enable="item === selectedItem" popover-open="isOpen === true" popover-placement="left-top">
<div class="col-xs-6">
<div class="panel" style="text-align:center;">
<img src="{{item.img}}" height="120px" width="auto">
</div>
</div>
<div class="col-xs-6">
<div class="panel">
<div class="panel-body" style="min-height:120px;">
<div><b>Category:</b> {{item.title}}</div>
<p><b>Desc:</b> {{item.desc}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Here i added sample code..
You were loading ui-bootstrap before angular, so it failed (I put ui-bootstrap after angular.js):
<script src="https://code.angularjs.org/1.5.5/angular.js" data-semver="1.5.5" data-require="angularjs#1.5.5"></script>
<script data-require="ui-bootstrap#*" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>
The datepicker directive was not being called, because it requires "uib-" (note uib-datepicker):
<button popover-placement="bottom" uib-popover-template="'calendar.html'" popover-trigger="click"><h1>Hello Plunker!</h1></button>
The datepicker directive was also not being called, because it requires "uib-" (note uib-datepicker):
<script id="calendar.html" type="text/ng-template">
<uib-datepicker ng-model="date" show-weeks="false"></datepicker>
</script>
And check output..
I built an online interview. The form uses Angular.js and Bootstrap to display questions and answers. Each answer is attached to a point value that gets summed and totaled at the end for a test score.
The application works wonderfully on Chrome and Safari (both desktop apps), and in Chrome Dev Tools, it simulates well on a multitude of mobile screens. However, when I view the app on an actual mobile device, I am unable to select an answer among the radio buttons. What can I do to debug?
Is Angular.js likely the cause? Perhaps this is a known problem with Bootstrap? How do I troubleshoot and repair?
Live Site (works on desktop currently (April 7,2016), but not on mobile):
http://libertas-security466.info/interview
test.html (Template for each question/answer set)
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>{{question.text}}</h1>
<p ng-show="question.subtext">{{question.subtext}}</p>
</div>
<div class="col-sm-12">
<p>Remaining Questions: {{questionsLeft}}</p>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<form class="form">
<div class="form-group">
<div class="input-group" ng-repeat="answer in question.answers">
<div class="input-group-addon">
<input type="radio" name="radioGroup" ng-model="selectedAnswer" value="{{answer.text}}" ng-click="setCurrentAnswer(answer)">
</div>
<label class="form-control">
{{answer.text}}
</label>
</div>
</div>
</form>
</div>
<div class="col-xs-12"> </div>
<div class="col-sm-3 col-sm-offset-9 text-center">
<button ng-click="answer(currentAnswer)" class="btn btn-large btn-primary">Select Answer</button>
</div>
</div>
</div>
index.html
<!DOCTYPE html>
<html ng-app="FreemasonTest">
<head>
<title>Are you ready?</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="lib/jquery-ui-1.11.4/jquery-ui.min.css" type="text/css" />
<link rel="stylesheet" href="lib/bootstrap-3.3.6-dist/css/bootstrap.min.css" type="text/css" />
<script type="text/javascript" src="lib/jquery/jquery-2.2.2.min.js"></script>
<script type="text/javascript" src="lib/jquery-ui-1.11.4/jquery-ui.min.js" ></script>
<script type="text/javascript" src="lib/angular/angular.min.js"></script>
<script type="text/javascript" src="lib/bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="javascript/app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js" type="text/javascript"></script>
<script type="text/javascript" src="javascript/routes.js"></script>
</head>
<body>
<script type="text/javascript" src="javascript/model/AssessmentModel.js"></script>
<script type="text/javascript" src="javascript/questions.js"></script>
<script type="text/javascript" src="javascript/needs.js"></script>
<script type="text/javascript" src="javascript/controllers/TestController.js"></script>
<script type="text/javascript" src="javascript/controllers/ResultsController.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Libertas-Security Lodge #466</a>
</div>
</div>
</nav>
<div ng-view></div>
</body>
</html>
#KieranDotCo provided the direction I needed. The solution to this problem comes in two parts:
How do I trouble shoot?
What is wrong?
== Troubleshooting ==
The instructions found at developers.google.com/web/tools/chrome-devtools/debug/… provided everything I needed to find and track down the solution.
== Making the App Work ==
The problem was not with Angular.js. Neither was it technically with Bootstrap, but the Bootstrap CSS was causing the problem.
I let the default column definition define the button div for the XS screen dimensions. In the Chrome debugger (image below), we will see that the <div> that contained the <button> element to select an answer, had dimensions that placed it above my radio buttons. This means that every time I tried to click a radio button, the blank space surrounding the "Select Answer" button was grabbing my event and bubbling it around the radio buttons to the body element that lay behind them.
In the above image, we see that when we select the <div> element which should cover the button and only the button that we have a highlighted area that expands in front of the radio buttons.
The answer to the problem lay in changing the class of this div to specify behavior for XS screens. After I add "col-xs-12" to the button div, the div no longer sits in front of the radio buttons and I can select options as I need to.
In the above image, we highlight the <div> as before, but now we see that the div is not bigger than the line that holds the <button>. The "col-xs-12" class 'fixed' the <div> dimensions and thus the app.
== Thank You ==
Big thank you to #KieranDotCo for teaching me about this great feature of Google Chrome's desktop application. You have opened a whole new world of debugging for me!
I am working with Angularjs and Angular-Strap and i copy Angular-Strap code sample for DropDown.
Inlined sibling dropdown
I configure every thing right but when i click on button an empty area expands. and new UL add to page and existing UL is invisible.
I try to create an plunker but couldn't add Angular-Starp library to it.
<!DOCTYPE html>
<html id="test" lang="en">
<head>
<meta charset="UTF-8">
<title>{{mainTitle}}</title>
<link rel="stylesheet" href="../style/bootstrap-RTL/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="../style/motion/angular-motion.min.css">
</head>
<body ng-app = "taxeeApp">
<!--a ui-sref="login">Login</a>
<a ui-sref="main">Main</a-->
<div ui-view></div>
<button type="button" class="btn btn-lg btn-primary" data-animation="am-flip-x" bs-dropdown aria-haspopup="true" aria-expanded="false">Click to toggle dropdown
<br>
<small>(using inlined sibling template)</small>
</button>
<ul class="dropdown-menu" role="menu">
<li><i class="fa fa-download"></i> Some action</li>
<li><a ng-click="$alert('Holy guacamole')"><i class="fa fa-globe"></i> Display an alert</a></li>
<li ng-repeat="i in ['Foo', 'Bar', 'Baz']"><a ng-href="#action{{i}}"><i class="fa fa-chevron-right"></i> {{i}}</a></li>
</ul>
</body>
</html>
<script type="text/javascript" src="../script/jquery.min.js"></script>
<script type="text/javascript" src="../script/angular/angular.min.js"></script>
<script type="text/javascript" src="../script/angular-strap/dist/angular-strap.min.js"> </script>
<script type="text/javascript" src="../script/angular-strap/dist/angular-strap.tpl.min.js"></script>
<script type="text/javascript" src="../script/angular/angular-ui-router.min.js"></script>
<script type="text/javascript" >
angular.module("taxeeApp", ['ui.router','mgcrea.ngStrap.dropdown']) ;
</script>
I am using angular v(1.4.5) and bootstrap v(3) and angular-strap v(2.3.3).
i finally found reason of this problem. i change my Angular-Strap version to v(2.3.6) and all problem resolved.......
I am new to angularjs,i made a sample app on plunker i am trying to display data that user enter after submit on other page.When user click on submit button the user data page should be displayed and all data given by user is displayed there.
here is my sample app index.html:
<!DOCTYPE html>
<!-- define angular app -->
<html ng-app="scotchApp">
<head>
<!-- SCROLLS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- SPELLS -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="script.js"></script>
<script src="homeDirective.js"></script>
</head>
<!-- define angular controller -->
<body ng-controller="mainController">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
<div id="main">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ui-view></div>
</div>
<footer class="text-center">
View the tutorial on Scotch.io
</footer>
</body>
</html>
An easy approach to this would be to store the submitted form data inside a service using a variable that is updated upon submit.
Then upon route change, the router can resolve the form data by making a request to that service for it before loading the next view, resulting in it being available for the next controller.
Hope that helps you out!
I'm trying to use Angular JS with Laravel 4.2. I've changed the blade's default {{}} into [[]], it works perfectly, now the problem is that when I puts Angular JS code in main layout (view) it works but when I put Angular JS code in a child view(actually child view extends the main layout and section is yielded using #section('contents') ...Angular JS code... #stop) it doesn't work at all, browser can't render the Angular JS exprerssion and shows it as it is in code editor! Here is my "main layout.blade.php" and "child.blade.php":
"main.layout.blade.php"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Customer Management</title>
<!-- Bootstrap -->
[[ HTML::style('css/bootstrap.min.css') ]]
[[ HTML::style('css/custom.css') ]]
[[--angular js files--]]
[[HTML::script('/js/angular/angular.min.js')]]
[[HTML::script('/js/controllers.js')]]
[[--jquery bootsrtap js files--]]
[[ HTML::script('js/respond.js') ]]
[[ HTML::script('js/jquery-1.11.2.min.js') ]]
[[ HTML::script('js/bootstrap.min.js') ]]
</head>
<body>
#include('layouts.main-menu')
<div class="container" id="container">
<div ng-app=""><!-- This Angular JS works fine -->
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
#yield('content')
</div>
#include('layouts.footer')
<script>
$("nav ul li").on("click", function() {
$("nav ul li").removeClass("active");
$(this).addClass("active");
});
</script>
</body>
</html>
Child.blade.php
#extends('layouts.main')
<!doctype html ng-app="myApp">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
#section('content')
<div ng-app=""><!-- This Angular JS doesn't work fine -->
<p>Name : <input type="text" ng-model="name1"></p>
<h1>Hello {{name1}} </h1>
</div>
#stop
</body>
</html>
You can see clearly that same Angular Code snippet is used in both files but in "layout.main.blade.php" it works and in "child.blade.php" it doesn't work as it is in between #section('content') ... #stop I can't get understand why this is and how to solve it!!!!!!
This is the response from network panel:
GET localhost:8000
200 OK
localhost:8000
3.4 KB
[::1]:8000
141ms
HeadersResponseHTMLCacheCookies
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Customer Management</title>
<!-- Bootstrap -->
<link media="all" type="text/css" rel="stylesheet" href="http://localhost:8000/css/bootstrap.min
.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost:8000/css/custom.css">
<script src="http://localhost:8000/js/angular/angular.min.js"></script>
<script src="http://localhost:8000/js/controllers.js"></script>
<script src="http://localhost:8000/js/respond.js"></script>
<script src="http://localhost:8000/js/jquery-1.11.2.min.js"></script>
<script src="http://localhost:8000/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse"
>
<span class="sr-only">Toggle navigation</span>
<span class="glyphicon glyphicon-arrow-down"></span>
MENU
</button>
</div>
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="/" ><span class="glyphicon
glyphicon-home"></span> Home</a></li>
<!--<li class="dropdown"><a href="#" data-toggle="dropdown">Dropdown
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Dr. Winthrop</li>
<li>Dr. Chase</li>
<li>Dr. Sanders</li>
</ul>
</li>-->
<li><span class="glyphicon glyphicon-edit"></span> Make CV</li
>
<li><span class="glyphicon glyphicon-eye-open"></span> Example</li>
<li><span class="glyphicon glyphicon-info-sign"></span> About</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Sign in</li
>
<li>Sign Up</li>
</ul>
</div>
</nav>
</div>
<div class="container" id="container">
<div ng-app="">
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
<div ng-app="">
<p>Name : <input type="text" ng-model="name1"></p>
<h1>Hello {{name1}} </h1>
</div>
</div>
<footer class="footer row ">
<div class="col-lg-4 col-sm-4 col-md-4" id="links">
<h4>Links</h4>
<ul class="list-unstyled">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
</footer>
<script>
$("nav ul li").on("click", function() {
$("nav ul li").removeClass("active");
$(this).addClass("active");
});
</script>
</body>
</html>
1 request
3.4 KB
141ms (onload: 1.06s)
I'm not a blade user so I can't tell you exactly how to fix this. I do use PHP but I use Eloquent (the ORM part of Laravel) and use Slim for doing the server side routing. I believe it's best to write your HTML simply as HTML, use $http (basically the same as $.ajax) to get your data into the client code but write them as totally separate code bases. This will afford you a lot more flexibility and greatly simplify the task of debugging since you aren't trying to figure out issues between the server and client simultaneously. You can test the server in isolation using curl or POSTMan and then can separately build/test the client using mock objects or real requests to your server side component.
On the client side of things what you show being output has quite a few problems though, multiple html tags (should be 1 for the document) multiple ng-app (same, 1 for the page typically on the html or body tag).
For bootstrap use ui-bootstrap, you need the regular bootstrap.css file and the ui-bootstrap-tpls.js file but not bootstrap.js.
Where you have the jQuery to bind to a click event on some elements you should be using an ng-click directive in the markup instead, also can use ng-class to conditionally add/remove a class to an element based on the state of a model.
It seems like you have an understanding of roughly how to use all these things but you need to clearly separate things and stop using jQuery for a while to get used to how to do things with Angular properly. If you try to use jQuery outside of directives or tests with Angular you're typically doing something wrong. For details see "Thinking in AngularJS" if I have a jQuery background?