I have built a directive for some of the boilerplate in the bootstrap navbar with ng-transclude for the navbar-collapse.I also find that there are two types of li elements for the navbar-nav items depending on whether the menu item is a dropdown or not.I find that this dropdown is however,not working.
I have built my code here in the plunker .
My JS code looks like this:
var app = angular.module('app',[]);
app.controller('main',['$scope',function($scope){
$scope.navbarOptions = {
color:'inverse',
position:'fixed-top',
collapseTarget:'navbar-ex1-collapse',
brand:'My Login',
};
$scope.menuItems=[{title:'home'},{title:'projects'},{title:'pricing'},
{
title:'Stack',
dropdown:['Java','Ruby','Javascript','Go']
}];
}]);
app.directive('bootstrapNavbar',function(){
return {
restrict:'AE',
templateUrl:'navbar.html',
scope:{
options:"="
},
transclude:true,
};
});
app.directive('bootstrapMenuitem',function(){
return {
restrict:'EA',
templateUrl:'bootstrap-menuItem.html',
scope:{
item:"#"
},
link:function(scope,element,attrs){
console.log(scope);
console.log(element);
console.log(attrs);
}
}
});
My html templates look like this:
//navbar.html
<nav class="navbar navbar-{{options.color}} navbar-{{options.position}}" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<!-- figure out a way to do toggle as an attribute directive -->
<button ng-show="options.collapseTarget" class="navbar-toggle" data-toggle="collapse" data-target=".{{options.collapseTarget}}">
<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="#">{{options.brand}}</a>
</div>
<div class="collapse navbar-collapse {{options.collapseTarget?options.collapseTarget:''}} navbar-body" ng-transclude>
</div><!-- /.navbar-collapse -->
</div>
</nav>
//bootstrap-menuItem.html
<li ng-hide="dropdown && dropdown.length">
{{item.title}}
</li>
<li ng-show="dropdown && dropdown.length" class="dropdown">
{{item.title}} <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="action in item.dropdown">{{action}}</li>
</ul>
</li>
This is my html:
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Building a directive for horizontal-form using Bootstrap using Angular">
<link data-require="bootstrap#*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="jquery#*" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script data-require="angular.js#*" data-semver="1.4.0-beta.2" src="https://code.angularjs.org/1.4.0-beta.2/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="main">
<nav options="navbarOptions" bootstrap-navbar>
<ul class="nav navbar-nav">
<bootstrap-menuitem ng-repeat="item in menuItems" item="{{item}}"></bootstrap-menuItem>
</ul>
</nav>
</body>
</html>
The question is how do I access the item inside bootstrap-menuitem?
The template seems unable to use the item although it is in the scope?
UPDATE:
The item property accessed on the scope is a string,it needs to be an object.How can I obtain a property in the controller scope on the scope of a nested directive?
Using item:"=" instead of # causes the error http://pastebin.com/e9NDVH5b .
I assume that when using = on the bootstrap-menuitem it takes the item from ng-repeat?
However,it causes {{item.title}} to show up on the page.
In your index.html, remove double brackets in attribute item,
<bootstrap-menuitem ng-repeat="item in menuItems" item="item"></bootstrap-menuItem>
Besides, in your bootstrapMenuitem, change scope item's declaration from item: "#" to item: "=":
app.directive('bootstrapMenuitem',function(){
return {
restrict:'EA',
templateUrl:'bootstrap-menuItem.html',
scope:{
item:"="
},
link:function(scope,element,attrs){
console.log(scope);
console.log(element);
console.log(attrs);
}
}
});
This way, item can be passed to your directive's template as an object instead of plain text string.
Related
i have build one web which include sidebar and the main content. I included the sidebar with ng-include , but the sidebar is not able to function.
<html>
<head>
<link href="lepwww/css/maincss.css" rel="stylesheet">
</head>
<body ng-app="myapp" ng-controller="dataController">
<div class="main-container">
<div ng-include="templates"></div>
</div>
<!-- Angular JS Scripts -->
<script src="lepwww/css/angular-1.6.1/angular.js"></script>
<script src="lepwww/css/angular-1.6.1/angular-animate.min.js"></script>
<script src="lepwww/css/angular-1.6.1/angular-aria.min.js"></script>
<script src="lepwww/css/angular-1.6.1/angular-messages.min.js"></script>
<script src="lepwww/vendors/svg-assets-cache/svg-assets-cache.js"></script>
<script src="lepwww/vendors/angular-material/angular-material.js"></script>
<script>
var app = angular.module("myapp", ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']);
app.filter('startFrom', function () {
return (input, start) => {
start = +start; //parse to int
return input.slice(start);
}
});
app.controller("dataController", ["$scope", "$http", "$element",
function ($scope, $http, $element) {
$scope.templates = 'view/layout/sidebar.html';
}
]);
</script>
<script src="lepwww/vendors/jquery/dist/jquery.min.js"></script>
<script src="lepwww/js/dialog/zebra_dialog.js"></script>
<!-- Bootstrap -->
<script src="lepwww/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="lepwww/js/test.js"></script>
<script src="lepwww/js/utils.js"></script>
</body>
</html>
If i copy direct the code to replace the nginclude, but able to function.
This is my sidebar code:
<div class="col-md-3 left_col">
<div class="left_col scroll-view">
<div class="navbar nav_title" style="border: 0;">
<a href="console.html" class="site_title">
<div class="profile_pic">
<img src="lepwww/images/lep_icon.png" alt="..." width="50" height="50">
</div>
<span>LEP-DMS</span>
</a>
</div>
<div class="clearfix"></div>
<!-- sidebar menu -->
<div id="sidebar-menu" class="main_menu_side main_menu" style=" margin-top:12px">
<div class="menu_section">
<h3>General</h3>
<ul class="nav side-menu">
<li>
<a>
<i class="fa fa-home"></i>Home
<span class="fa fa-chevron-down"></span>
</a>
<ul class="nav child_menu">
<li>
Dashboard
</li>
</ul>
</li>
<li>
<a>
<i class="fa fa-tv"></i> Inventory
<span class="fa fa-chevron-down"></span>
</a>
<ul class="nav child_menu">
<li id="li_hardware">
Hardware
</li>
<li id="li_software" class="">
Software
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
I tried to include the javascript file inside also, still not working.
Tried the method to switch the jquery file and angularjs file(The position of javascript file changed, still not able to work).
Any idea how does this problem occur? Since i check the console also not found any error for this.
Thanks.
If you couldn't find any error in console, that's mean either the code doesn't being trigger or the code being trigger but selector select nothing(it also could be selector undefined but well handle in your code snippet, that probably why it doesn't output undefined exception)
Next if it get trigger, check whether or not your sidebar javascript call before ng-include, simply use break point to verify.
If it is trigger before, you can simply a <script>... <your js code to make sidebar work> ...</script> under the end of your ng-include file. Manually call the function again, at this point, it should work since your html component appear in DOM.
I am working mvc-5 and using bootstrap and all my links are in _Layout.cshtml now i have a drop down tabs like this http://prntscr.com/76jfba (using bootstrap, It is obtained on VStudio project launch) now in my
_Layout.cshtml I have renderbody() which renders all my UI .
What I want to do
On clicking the tab "Real Time" I get a dropdown list which on futher click to "Tabular" must open replace the current view just below the tabs to a new view .
How I tried to do this
(1) In home controller I do this :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace testLayt.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
public ActionResult tabularshared()
{
return View();
}
}
}
(2) Then I create view and in that view I add Layout path like this :
#{
ViewBag.Title = "shekharTabularshared";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>tabularshared</h2>
As a result I have all the tabs but they are not aligned properly. It now shows the view like this: http://prntscr.com/76jiag
I feel like I dont have access to bootstrap here or I am doing anything wrong ?
Could some one please give guidance such that I can have tabular.cshtml view just below the tab in the first link (this tab will be common to all the views obtained)
EDIT: _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
<!--starts here-->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="bootstrap/js/jquery-ui.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script> <!--click on main tab disappers-->
<script src="~/Scripts/jquery-1.10.2.intellisense.js"></script>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<!--ends here-->
</head>
<body>
<div>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<div class="navbar navbar-custom navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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" #Html.ActionLink("Vision Vertex", "Index", "Home") />
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
Real Time
<i class="caret"></i>
</a>
<ul class="dropdown-menu">
<li>
<!--onclick="tabularFunction()" -->
#*<a tabindex="-1" href="~/Views/Home/BackgroundViews/tabular.cshtml">Tabular</a>*#
#Html.ActionLink("Tabular", "tabularshared", "Home")
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
</body>
</html>
and Index.cshtml is:
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>shekhar Index</h2>
Further i noticed that on clicking at "Tabular" when i do "Inspect elements" i do not have <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" /> it's surprising for and i am stuck here since 3 last days. Could someone please help me?
Here is my full project i really appreciate if you could please help me coming out of this problem https://www.dropbox.com/sh/autm3mkqfdu0aup/AADfAeUSlvcDt7PTX8G5Qz9La?dl=0
It makes no difference on how you render your UI.
Make sure there are no errors in your developer console (you might wrongly
configure your bundles for bootstrap scripts).
Left only one reference to bootstrap CSS:
href="~/Content/bootstrap.min.css"
Inspect in developer console that all scripts&styles are actually loaded to the page.
If nothing wrong but your code still not works - add a full screenshot of your web-page in browser and let me know in comments.
You have lost '~' symbols in your bootsrap CSS links.
<script src="bootstrap/js/jquery-ui.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
Solution
My question was asked with little knowledge in HTML and JavaScript, I apologize for this. With more experience I can clearly see that this was not a good question asked, anyway the solution to my question was simply that the source file was not in the corresponding library.
The thing is, when I click on "live preview" in brackets IDE, I can see the dynamic diagram I have created, but when I double click on the index.html file, it is showing the navigation bar, but not the dynamic chart....So the difference is:
- Live priview: is showing the navigation-bar with the dynamic chart
- Double click on index.html: showing just the navigation-bar without the dynamic chart....?
Btw: I have also tested this in localhost with xamp, same problem there with no dynamic chart...
Here is my code: index.html:
<!DOCTYPE html>
<html>
<head>
<!-- Unable to zooming device -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<!-- Initialize jquery -->
<script src="js/jquery-2.1.3.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Link to stylesheet bootstrap.css -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<!--Live Random Data -->
<script type="text/javascript">
window.onload = function () {
var dps = []; // dataPoints
var chart = new CanvasJS.Chart("chartContainer",{
title :{
text: "Live Random Data"
},
data: [{
type: "line",
dataPoints: dps
}]
});
var xVal = 0;
var yVal = 100;
var updateInterval = 20;
var dataLength = 500; // number of dataPoints visible at any point
var updateChart = function (count) {
count = count || 1;
dataPoints.
for (var j = 0; j < count; j++) {
yVal = yVal + Math.round(5 + Math.random() *(-5-5));
dps.push({
x: xVal,
y: yVal
});
xVal++;
};
if (dps.length > dataLength)
{
dps.shift();
}
chart.render();
};
// generates first set of dataPoints
updateChart(dataLength);
// update chart after specified time.
setInterval(function(){updateChart()}, updateInterval);
}
</script>
<script type="text/javascript" src="/canvasjs/canvasjs.min.js"></script>
</head> <!-- End header-->
<body>
<nav class = "navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"> </span>
<span class="icon-bar"></span>
</button>
<a style = "color:red;"class="navbar-brand" href="#">KPEC</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><span class="glyphicon glyphicon-home" style="font-size:25px;" aria-hidden="true"></span></li>
<li><span class="glyphicon glyphicon-edit" style="font-size:25px;" aria-hidden="true"></span></li>
<li><span class="glyphicon glyphicon-stats" style="font-size:25px;" aria-hidden="true"></span></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-list-alt" style="font-size:25px;" aria-hidden="true"></span></li>
<li class="dropdown">
<span class="glyphicon glyphicon-cog" style="font-size:25px;" aria-hidden="true"></span><span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>5</li>
<li>6</li>
<li>7</li>
<li class="divider"></li>
<li>8</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav><!-- end navbar -->
<!--Window Size Of Realtime Data-->
<div id="chartContainer" style="height: 300px; width:100%;"></div>
</body> <!-- End body-->
</html><!-- End html-->
I think the path of your dependancies are not correct, some time you ahve it relative, sometime not.
Try to put the absolutes one in relative? eg replace
<script type="text/javascript" src="/canvasjs/canvasjs.min.js"></script>
to
<script type="text/javascript" src="canvasjs/canvasjs.min.js"></script>
I have this example in a file called: navigation.html in a folder off the root called: IMPORTS
<!-- Navigation -->
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- This is the section that doesn't work -->
<a class="brand" href="#" data-target=".pe-container">The Book Cover</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>
About
</li>
<li class="divider-vertical"></li>
<li>
Books
</li>
<li class="divider-vertical"></li>
<li>
Blog
</li>
<li class="divider-vertical"></li>
<li>
Contact
</li>
<li class="navigation-right"><i class="sprite sprite-twitter"></i></li>
<li class="navigation-right"><i class="sprite sprite-facebook"></i></li>
<li class="navigation-right"><i class="sprite sprite-google"></i></li>
</ul>
</div>
</div>
</div>
Then in the index page I have this:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Load the Metatag Files Partial -->
<link rel="import" href="partials/metatags.html" />
<!-- Load the CSS Files Partial -->
<link rel="import" href="partials/css-files.html" />
<!-- Load the JS Files Partial -->
<link rel="import" href="partials/js-files.html" />
<title>Title Goes here/title>
</head>
<body id="page">
<div id="container" class="contain">
<!-- Navigation -->
<div id="navBarMain" class="navbar navbar-inverse navbar-fixed-top"></div>
<!-- End Navigation -->
</div>
</body>
</html>
And finally the JQuery that loads the div...
// JQUery Fancy Box
$(document).ready(function() {
//Load Imports
//Navigation
$("#navBarMain").load("imports/navigation.html");
//This is the menu system
$(function() {
$('.nav a, .brand, a[data-target]').click(function() { //This is what's not working
$('html, body').animate({
scrollTop: $($(this).attr('data-target')).offset().top - 50
}, 500);
});
});
});
The problem is, when I place the "navigation.html" file BACK into the div on the index page, the menu at the top of page works. BUT, when I load the "navigation.html" page as is, the menu click event does nothing. I know there's a call that's wrong so if you could help, it would be greatly appreciated. OF NOTE: There are NO Javascript errors in the console even with breakpoints, nothing happens. The code LOADS initially and stops at the breakpoint, but when I click on the menu, nothing, nada, ziltch....
Try attaching the events in the callback function of .load:
$(function() {
$("#navBarMain").load("imports/navigation.html", function() {
$('.nav a, .brand, a[data-target]').click(function() { //This is what's not working
$('html, body').animate({
scrollTop: $($(this).attr('data-target')).offset().top - 50
}, 500);
});
});
});
I'm trying to implement Fuelux's wizard feature and have hit a brick wall. I am simply trying to achieve a working replica of the live example but keep receiving the error in my console:
Uncaught TypeError: Object [object Object] has no method 'wizard'
I am finding a lot of the documentation a little overwhelming and would appreciate some clarity on the subject in plain [or plainer] English.
My markup is:
<!DOCTYPE html>
<html class="no-js fuelux">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>E-Learning</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/fuelux.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<div id="my-wizard" class="wizard">
<ul class="steps">
<li data-target="#step1" class="active"><span class="badge badge-info">1</span>Step 1<span class="chevron"></span></li>
<li data-target="#step2"><span class="badge">2</span>Step 2<span class="chevron"></span></li>
<li data-target="#step3"><span class="badge">3</span>Step 3<span class="chevron"></span></li>
<li data-target="#step4"><span class="badge">4</span>Step 4<span class="chevron"></span></li>
<li data-target="#step5"><span class="badge">5</span>Step 5<span class="chevron"></span></li>
</ul>
<div class="actions">
<button class="btn btn-mini btn-prev"> <i class="icon-arrow-left"></i>Prev</button>
<button class="btn btn-mini btn-next" data-last="Finish">Next<i class="icon-arrow-right"></i></button>
</div>
</div>
<div class="step-content">
<div class="step-pane active" id="step1">
...
</div>
<div class="step-pane" id="step2">
...
</div>
<div class="step-pane" id="step3">
...
</div>
</div>
</div>
<script src="js/vendor/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/require.js"></script>
<script src="js/wizard.js"></script>
<script>
$(document).ready(function(){
$('#my-wizard').on('change', function(e, data) {
console.log('change');
if(data.step===3 && data.direction==='next') {
// return e.preventDefault();
}
});
$('#my-wizard').on('changed', function(e, data) {
console.log('changed');
});
$('#my-wizard').on('finished', function(e, data) {
console.log('finished');
});
$('.btn-prev').on('click', function() {
console.log('prev');
$('#my-wizard').wizard('previous');
});
$('.btn-next').on('click', function() {
console.log('next');
$('#my-wizard').wizard('next','foo');
});
});
</script>
</body>
</html>
So close! For both the CSS and JS since Fuel UX includes Bootstrap you simply include Fuel UX in place of Boostrap and you get all of Bootstrap plus Fuel UX:
<link rel="stylesheet" href="https://fuelcdn.com/fuelux/2.3/css/fuelux.min.css">
<script src="https://fuelcdn.com/fuelux/2.3/loader.min.js"></script>
Your template looks great and with just the above modifications, plus removing a couple of lines that were causing double-processing, this works just as expected. See the full example here:
Gist: https://gist.github.com/adamalex/5412079
Live example: http://bl.ocks.org/adamalex/5412079