So the flow is I visit / then the script load main.html which include header.html then inject to ng-view in index.html
Here is the detail
My index.html
<!DOCTYPE HTML>
<html>
<head>
<title>Koupon - Index</title>
<!-- meta info -->
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="keywords" content="Koupon HTML5 Template" />
<meta name="description" content="Koupon - Premiun HTML5 Template for Coupons Website">
<meta name="author" content="Dark Cyber" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Google fonts -->
<!-- <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600' rel='stylesheet' type='text/css'> -->
<!-- <link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'> -->
<!-- Bootstrap styles -->
<link rel="stylesheet" href="css/boostrap.css">
<link rel="stylesheet" href="css/boostrap_responsive.css">
<!-- Font Awesome styles (icons) -->
<link rel="stylesheet" href="css/font_awesome.css">
<!-- Main Template styles -->
<link rel="stylesheet" href="css/styles.css">
<!-- IE 8 Fallback -->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]-->
<!-- Your custom styles (blank file) -->
<link rel="stylesheet" href="css/mystyles.css">
<!-- Backend Style -->
<!-- End Backend Style -->
</head>
<body ng-app="rentalkika">
<!-- //// START PAGE CONTENT -->
<div ng-view>
</div>
<!-- END PAGE CONTENT /// -->
<!-- Scripts queries -->
<script src="js/jquery.js"></script>
<script src="js/boostrap.min.js"></script>
<script src="js/nivo_slider.min.js"></script>
<script src="js/countdown.min.js"></script>
<script src="js/magnific.min.js"></script>
<script src="js/tweet.min.js"></script>
<!--
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="js/gmap3.min.js"></script>
-->
<script src="js/wilto_slider.min.js"></script>
<script src="js/mediaelement.min.js"></script>
<script src="js/fitvids.min.js"></script>
<script src="js/mail.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/ng-file-upload-shim.js"></script>
<script src="js/ng-file-upload.js"></script>
<script src="js/app.js"></script>
<script src="js/flexnav.min.js"></script>
<!-- Custom scripts -->
<script src="js/custom.js"></script>
<script type="text/javascript" >
if($('#something').length){
alert('something found');
//I want to init plugin with #something here
}else{
alert('something not found');
}
</script>
<!-- Backend JS -->
<!-- End Backend JS -->
</body>
</html>
app.js
$routeProvider
.when('/', {
templateUrl : 'pages/main.html',
title: "Home"
})
main.html
<div ng-include="'header.html'"></div>
<!-- TOP AREA -->
<div class="top-area">
<!-- START BOOTSTRAP CAROUSEL -->
<div id="my-carousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<img src="img/1200x480.png" alt="Image Alternative text" title="Old No7" />
<div class="carousel-caption countdown-caption">
<h3>Jack Daniels Huge Pack</h3>
<!-- COUNTDOWN -->
<div data-countdown="Aug 25, 2013 5:30:00" class="countdown"></div>Save 70%
</div>
</div>
<div class="item">
<img src="img/1200x480.png" alt="Image Alternative text" title="iPhone 5 iPad mini iPad 3" />
<div class="carousel-caption countdown-caption">
<h3>Apple Big Deal</h3>
<!-- COUNTDOWN -->
<div data-countdown="Aug 30, 2013 10:45:00" class="countdown"></div>Save 50%
</div>
</div>
<div class="item">
<img src="img/1200x480.png" alt="Image Alternative text" title="the best mode of transport here in maldives" />
<div class="carousel-caption countdown-caption">
<h3>Finshing in Maldives</h3>
<!-- COUNTDOWN -->
<div data-countdown="Sep 2, 2013 22:00:00" class="countdown"></div>Save 30%
</div>
</div>
</div>
<a class="carousel-control left" href="#my-carousel" data-slide="prev"></a>
<a class="carousel-control right" href="#my-carousel" data-slide="next"></a>
</div>
<!-- END BOOTSTRAP CAROUSEL -->
</div>
<!-- END TOP AREA -->
<div ng-include="'footer.html'"></div>
header.html
<!-- //////////////////////////////////
//////////////MAIN HEADER/////////////
////////////////////////////////////-->
<div id="something">
</div>
<header class="main">
<div class="container">
<div class="row">
<div class="span2">
<a href="index.html">
<img src="img/logo-small.png" alt="logo" title="logo" class="logo">
</a>
</div>
<div class="span8">
<!-- MAIN NAVIGATION -->
<div class="flexnav-menu-button" id="flexnav-menu-button">Menu</div>
<nav>
<ul class="nav nav-pills flexnav" id="flexnav" data-breakpoint="800">
<li class="active">Home
</li>
<li>Layanan
<ul>
<li>Sewa Mobil
</li>
<li>Shuttle
</li>
</ul>
</li>
<li>Paket Wisata
<ul>
<li>xxx</li>
<li>bbb</li>
</ul>
</li>
<li>Blog
</li>
<li>FAQ
</li>
<li>Tertarik menjadi mitra kami?</li>
<li>Contact
</li>
</ul>
</nav>
<!-- END MAIN NAVIGATION -->
</div>
<div class="span2">
<!-- LOGIN REGISTER LINKS -->
<ul class="login-register" ng-controller="LoginController">
<li ng-hide="loggedIn"><a class="popup-text" href="#login-dialog" data-effect="mfp-move-from-top"><i class="icon-signin"></i>Sign in</a>
</li>
<li ng-show="loggedIn"><i class="icon-signout"></i>Sign out
</li>
<li><i class="icon-edit"></i>Sign up
</li>
<!-- LOGIN REGISTER LINKS CONTENT -->
<div id="login-dialog" class="mfp-with-anim mfp-hide mfp-dialog clearfix">
<i class="icon-signin dialog-icon"></i>
<h3>Member Login</h3>
<h5>Welcome back, friend. Login to get started</h5>
<div class="row-fluid">
<form class="dialog-form" ng-submit="handleLogin()" >
<label>Username</label>
<input type="text" placeholder="yourUsername" ng-model="login.username" class="span12">
<label>Password</label>
<input type="password" placeholder="My secret password" ng-model="login.password" class="span12">
<label class="checkbox">
<input type="checkbox">Remember me
</label>
<div class="control-group error" ng-show="error">
<span class="error help-block">
{{ error }}
</span>
</div>
<input type="submit" value="Sign in" class="btn btn-primary">
<button ng-click="FBLogin()" class="btn btn-primary">Login with Facebook</button>
</form>
</div>
<!--
<ul class="dialog-alt-links">
<li><a class="popup-text" href="#register-dialog" data-effect="mfp-zoom-out">Not member yet</a>
</li>
<li><a class="popup-text" href="#password-recover-dialog" data-effect="mfp-zoom-out">Forgot password</a>
</li>
</ul>
-->
</div>
</ul>
</div>
</div>
</div>
</header>
<div id="password-recover-dialog" class="mfp-with-anim mfp-hide mfp-dialog clearfix">
<i class="icon-retweet dialog-icon"></i>
<h3>Password Recovery</h3>
<h5>Fortgot your password? Don't worry we can deal with it</h5>
<div class="row-fluid">
<form class="dialog-form">
<label>E-mail</label>
<input type="text" placeholder="email#domain.com" class="span12">
<input type="submit" value="Request new password" class="btn btn-primary">
</form>
</div>
</div>
<!-- END LOGIN REGISTER LINKS CONTENT -->
<!-- //////////////////////////////////
//////////////END MAIN HEADER//////////
////////////////////////////////////-->
The above script will alert something not found but if I put <div id="something"></div> directly to index.html the script will alert something found
What I need is <div id="something"></div> in header.html then I init plugin with #something in index.html
Is something wrong with my structure or code?
<div id="something" ng-controller="SomethingController">
</div>
then in your SomethingController
$("#something").initPlugin();
Related
I am using AngularJS for the very first time and I am writing down the HTML script of the page over here:
<!DOCTYPE html>
<html>
<head>
<title>_LayoutPersonal</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.12.0.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.min.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script>
alert("india");
function questionController($scope) {
$scope.queList = ['a', 'b'];
alert("India");
}
var queApp = angular.module("queApp", []);
queApp.controller("queCtrl", questionController);
</script>
</head>
<body>
<!-- Always on top: Position Fixed-->
<header>
Stack Overflow
</header>
<div class="subheader">
<div style="float:left;"><h1>Stack Overflow</h1></div>
<div class="sidebar3">
<input type="button" id="btnQuestions" value="Questions" onclick="location.href='/Question/Show'"/>
<input type="button" id="btnJobs" value="Jobs" onclick="location.href='/Question/Show'"/>
<input type="button" id="btnTags" value="Tags" onclick="location.href='/Question/Show'"/>
<input type="button" id="btnUsers" value="Users" onclick="location.href='/Question/Users'"/>
<input type="button" id="btnBadges" value="Badges" onclick="location.href='/Question/Badges'"/>
<input type="button" id="btnAskQuestion" value="Ask Question" onclick="location.href='/Question/Ask'"/>
Ask Question
</div>
</div>
<!-- Fixed size after header-->
<div class="content">
<!-- Scrollable div with main content -->
<div id="scrollable2">
<h3>Questions</h3>
<a href="/Question/Show/1">
<div class="questionlistitem">
<label for="Model_binding_MVC_3_not_working_as_expected">Model binding MVC 3 not working as expected</label>
<label for="">9/14/2016 12:00:00 AM</label>
</div>
</a>
<a href="/Question/Show/2">
<div class="questionlistitem">
<label for="Business_logic_layer_in_ASP_NET_MVC_-_Architecture">Business logic layer in ASP.NET MVC - Architecture</label>
<label for="">9/10/2016 12:00:00 AM</label>
</div>
</a>
<div ng-controller="queCtrl">
<div ng-repeat="question in queList">
{{question}}
</div>
</div>
</div>
<!-- Always on top. Fixed position, fixed width, relative to content width -->
<div class="sidebar2">
<div class="metapost">
<h4 class="headertitle">Hot Meta Post</h4>
<div class="sidebarinnerdiv">Is it useful to edit a question I will vote to close? </div>
<div class="sidebarinnerdiv">Rewriting a Waffle question</div>
</div>
<div class="networkquestions">
<h4>Hot Network Questions</h4>
<div class="sidebarinnerdiv">How to pronounce the English alphabet? (A, B, C, ...)</div>
<div class="sidebarinnerdiv">Why does the Black Lives Matter movement organize protests while the incident they're protesting is still under investigation?</div>
</div>
</div>
</div>
<!-- Always at the end of the page -->
<footer>
Copyright 2016, Stack Overflow
</footer>
</body>
</html>
It is not working and I am seeing {{question}} on the page. I am not able to trace down the source of the error. Please help me make my page work.
You forgot to add ng-app="queApp"
function questionController($scope) {
$scope.queList = ['a', 'b'];
}
var queApp = angular.module("queApp", []);
queApp.controller("queCtrl", questionController);
<!DOCTYPE html>
<html ng-app="queApp">
<head>
<title>_LayoutPersonal</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.12.0.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.min.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body>
<!-- Always on top: Position Fixed-->
<header>
Stack Overflow
</header>
<div class="subheader">
<div style="float:left;">
<h1>Stack Overflow</h1>
</div>
<div class="sidebar3">
<input type="button" id="btnQuestions" value="Questions" onclick="location.href='/Question/Show'" />
<input type="button" id="btnJobs" value="Jobs" onclick="location.href='/Question/Show'" />
<input type="button" id="btnTags" value="Tags" onclick="location.href='/Question/Show'" />
<input type="button" id="btnUsers" value="Users" onclick="location.href='/Question/Users'" />
<input type="button" id="btnBadges" value="Badges" onclick="location.href='/Question/Badges'" />
<input type="button" id="btnAskQuestion" value="Ask Question" onclick="location.href='/Question/Ask'" />
Ask Question
</div>
</div>
<!-- Fixed size after header-->
<div class="content">
<!-- Scrollable div with main content -->
<div id="scrollable2">
<h3>Questions</h3>
<a href="/Question/Show/1">
<div class="questionlistitem">
<label for="Model_binding_MVC_3_not_working_as_expected">Model binding MVC 3 not working as expected</label>
<label for="">9/14/2016 12:00:00 AM</label>
</div>
</a>
<a href="/Question/Show/2">
<div class="questionlistitem">
<label for="Business_logic_layer_in_ASP_NET_MVC_-_Architecture">Business logic layer in ASP.NET MVC - Architecture</label>
<label for="">9/10/2016 12:00:00 AM</label>
</div>
</a>
<div ng-controller="queCtrl">
<div ng-repeat="question in queList">
{{question}}
</div>
</div>
First of all you need 'ng-app="queApp"' in order to use AngularJS (Basics AngularJS)
in app.js
$routeProvider.when('/', {
templateUrl : appUrl + '/index.html',
controller : 'HomePageController'
});
in controller.js
angular.module('PoliticalOrg').controller('HomePageController',function( $scope ) {
$scope.Login= function () {
alert("s");
}
});
in index.html
<!DOCTYPE html>
<html lang="en" ng-app="PoliticalOrg">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta charset="utf-8">
<title>Organization</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta content="" name="description">
<meta content="" name="author">
<link href="assets/plugins/pace/pace-theme-flash.css" rel="stylesheet" type="text/css" media="screen">
<!-- BEGIN CORE CSS FRAMEWORK -->
<link href="assets/plugins/boostrapv3/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="assets/plugins/boostrapv3/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
<link href="assets/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">
<link href="assets/css/animate.min.css" rel="stylesheet" type="text/css">
<link href="assets/plugins/jquery-scrollbar/jquery.scrollbar.css" rel="stylesheet" type="text/css">
<!-- END CORE CSS FRAMEWORK -->
<script src="libs/vendor/angularJS/angular.min.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script src="js/login/config.js"></script>
<script src="js/login/Controllers.js"></script>
<script type="js/login/services.js"></script>
<script type="js/globalmethods/login.js"></script>
<!-- BEGIN CSS TEMPLATE -->
<link href="assets/css/style.css" rel="stylesheet" type="text/css">
<link href="assets/css/responsive.css" rel="stylesheet" type="text/css">
<link href="assets/css/custom-icon-set.css" rel="stylesheet" type="text/css">
<!-- END CSS TEMPLATE -->
<script src="js/app.js"></script>
<script src="js/Controllers.js"></script>
<script src="js/registration/config.js"></script>
<script src="js/registration/Controllers.js"></script>
<script src="js/login/config.js"></script>
<script src="js/login/Controllers.js"></script>
<script src="js/login/services.js"></script>
<script src="js/candidate/config.js"></script>
<script src="js/candidate/Controllers.js"></script>
<script src="js/candidate/services.js"></script>
<script src="js/submemberrequests/config.js"></script>
<script src="js/submemberrequests/Controllers.js"></script>
<script src="js/submemberrequests/services.js"></script>
<script src="js/messages/config.js"></script>
<script src="js/messages/Controllers.js"></script>
<script src="js/messages/services.js"></script>
<script src="js/users/config.js"></script>
<script src="js/users/Controllers.js"></script>
<script src="js/users/services.js"></script>
<script src="js/admin/config.js"></script>
<script src="js/admin/Controllers.js"></script>
<script src="js/admin/services.js"></script>
<script src="js/users/services.js"></script>
<script src="js/globalmethods/map.js"></script>
<script src="js/globalmethods/login.js"></script>
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body class="boxed-layout breakpoint-1024 pace-done grey"><div class="pace pace-inactive"><div class="pace-progress" data-progress-text="100%" data-progress="99" style="width: 100%;">
<div class="pace-progress-inner"></div>
</div>
<div class="pace-activity"></div></div>
<!-- BEGIN HEADER -->
<div class="container">
<div class="header navbar navbar-inverse ">
<!-- BEGIN TOP NAVIGATION BAR -->
<div class="container">
<div class="navbar-inner">
<div class="header-seperation" style="display: none; height: 61px;">
<ul class="nav pull-left notifcation-center" id="main-menu-toggle-wrapper" style="display:none">
<li class="dropdown"> <a id="main-menu-toggle" href="#main-menu" class=""> <div class="iconset top-menu-toggle-white"></div> </a> </li>
</ul>
<!-- BEGIN LOGO -->
<img src="assets/img/logo.png" class="logo" alt="" data-src="assets/img/logo.png" data-src-retina="assets/img/logo2x.png" width="106" height="21">
<!-- END LOGO -->
<ul class="nav pull-right notifcation-center">
<li class="dropdown" id="header_task_bar"> <div class="iconset top-home"></div> </li>
<li class="dropdown" id="header_inbox_bar"> <div class="iconset top-messages"></div> <span class="badge animated bounceIn" id="msgs-badge">2</span> </li>
<li class="dropdown" id="portrait-chat-toggler" style="display:none"> <div class="iconset top-chat-white "></div> </li>
</ul>
</div>
<!-- END RESPONSIVE MENU TOGGLER -->
<div class="header-quick-nav">
<!-- BEGIN TOP NAVIGATION MENU -->
<!-- END TOP NAVIGATION MENU -->
<!-- BEGIN CHAT TOGGLER -->
<div class="pull-right">
<div class="chat-toggler">
<a href="#" class="dropdown-toggle" id="my-task-list" data-placement="bottom" data-content="" data-toggle="dropdown" data-original-title="">
<div class="user-details">
<div class="username">
<span class="bold">Login</span>
</div>
</div>
<div class="iconset top-down-arrow"></div>
</a>
<div id="notification-list" style="display:none">
<div style="width:300px">
<div class="grid-body no-border">
<div class="row-fluid">
<p>Enter your username and password to login</p>
<br>
<div class="row form-row">
<div class="input-append col-md-10 col-sm-10 primary">
<input type="text" id="email" name="email" class="form-control" placeholder="someone#example.com">
<span class="add-on"><span class="arrow"></span><i class="fa fa-align-justify"></i> </span> </div>
</div>
<div class="row form-row">
<div class="input-append col-md-10 col-sm-10 primary">
<input type="password" id="password" name="password" class="form-control" placeholder="your password">
<span class="add-on"><span class="arrow"></span><i class="fa fa-lock"></i> </span> </div>
</div>
</div>
<div class="form-actions">
<div class="pull-right">
<button type="button" ng-click="Login()" value="Login" class="btn btn-primary btn-cons-md"> login</button>
<button type="button" class="btn btn-white btn-cons-md">Clear</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END CHAT TOGGLER -->
</div>
<!-- END TOP NAVIGATION MENU -->
</div>
<!-- END TOP NAVIGATION BAR -->
</div>
</div>
<!-- END HEADER -->
<!-- BEGIN CONTAINER -->
<div class="page-container row-fluid">
<!-- BEGIN SIDEBAR -->
Scroll
<!-- END SIDEBAR -->
<!-- BEGIN PAGE CONTAINER-->
<div class="page-content condensed" data-height="679">
<!-- BEGIN SAMPLE PORTLET CONFIGURATION MODAL FORM-->
<div id="portlet-config" class="modal hide">
<div class="modal-header">
<button data-dismiss="modal" class="close" type="button"></button>
<h3>Widget Settings</h3>
</div>
<div class="modal-body"> Widget settings form goes here </div>
</div>
<div class="clearfix"></div>
<div class="content">
<div class="page-title">
<h3>Home Page</h3>
</div>
</div>
</div>
<!-- BEGIN CHAT -->
<!-- END CHAT -->
</div>
<!-- END CONTAINER -->
<!-- BEGIN CORE JS FRAMEWORK-->
<script src="assets/plugins/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-ui/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
<script src="assets/plugins/boostrapv3/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/plugins/breakpoints.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-unveil/jquery.unveil.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-block-ui/jqueryblockui.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-scrollbar/jquery.scrollbar.min.js" type="text/javascript"></script>
<!-- END CORE JS FRAMEWORK -->
<!-- BEGIN PAGE LEVEL JS -->
<script src="assets/plugins/pace/pace.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-numberAnimate/jquery.animateNumbers.js" type="text/javascript"></script>
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN CORE TEMPLATE JS -->
<script src="assets/js/core.js" type="text/javascript"></script>
<script src="assets/js/chat.js" type="text/javascript"></script>
<script src="assets/js/demo.js" type="text/javascript"></script>
<!-- END CORE TEMPLATE JS -->
</div><div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"><div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div></div></body></html>
I mentioned app.js and controller.js in index.html. Here's the problem I am facing. When I click on the login button in index.html ng-click="Login()" function defined in HomePageController the Login function is not called.
This happened because the controller is not loaded correctly, you were trying to load the controller form the index.html page at the same time you included your scripts on index.html page.
$routeProvider.when('/', {
templateUrl : appUrl + '/index.html',
controller : 'HomePageController'
});
so what you should do is breakdown your views using ui-view.
put the folowing in home.html file
<!-- BEGIN CHAT TOGGLER -->
<div class="pull-right">
<div class="chat-toggler">
<a href="#" class="dropdown-toggle" id="my-task-list" data-placement="bottom" data-content="" data-toggle="dropdown" data-original-title="">
<div class="user-details">
<div class="username">
<span class="bold">Login</span>
</div>
</div>
<div class="iconset top-down-arrow"></div>
</a>
<div id="notification-list" style="display:none">
<div style="width:300px">
<div class="grid-body no-border">
<div class="row-fluid">
<p>Enter your username and password to login</p>
<br>
<div class="row form-row">
<div class="input-append col-md-10 col-sm-10 primary">
<input type="text" id="email" name="email" class="form-control" placeholder="someone#example.com">
<span class="add-on"><span class="arrow"></span><i class="fa fa-align-justify"></i> </span> </div>
</div>
<div class="row form-row">
<div class="input-append col-md-10 col-sm-10 primary">
<input type="password" id="password" name="password" class="form-control" placeholder="your password">
<span class="add-on"><span class="arrow"></span><i class="fa fa-lock"></i> </span> </div>
</div>
</div>
<div class="form-actions">
<div class="pull-right">
<button type="button" ng-click="Login()" value="Login" class="btn btn-primary btn-cons-md"> login</button>
<button type="button" class="btn btn-white btn-cons-md">Clear</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END CHAT TOGGLER -->
and add ui-view in the index.html instead of the above code. then change the route like this
$routeProvider.when('/', {
templateUrl : appUrl + '/home.html',
controller : 'HomePageController'
})
i.e you should initialize the index.html from the file not from the route
Follow this ui-router documentation.
I've looked at ng-view according to
https://docs.angularjs.org/api/ngRoute/directive/ngView
However, I'm very unsure as to how I would incorporate the above with the dropdown menu.
Here's a few screenshots showing what the website currently looks like for reference.
imgur.com/a/NUVEe
Here's the code
index.html
<html ng-app="app">
<head>
<link rel="stylesheet" href="css/bootstrap.min.css" />
</head>
<body ng-controller="MainController">
<nav class="navbar navbar-default">
<div class="container"> <!-- top intro part -->
<div class="navbar-header">
<a class="navbar-brand" href="#/"> OPENCV 3.0.0</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>
<ng-view>
<div class="row"> <!-- Dropdown menu -->
<div class="col-md-20">
<div id="main">
<form class="form-horizontal" role="form">
<label class="control-label col-md-2">Filter List:</label>
<div class="col-md-5">
<select class="form-control"
ng-options="filter for filter in filters"
ng-model="filter"
ng-change="GoToOpenCVpage(filter)">
<option value=""> Select Filter</option>
</select>
</div>
</form>
</div>
</div>
</div>
</ng-view>
<div id = "content"> <!-- stuff showing opencv filter goes in here -->
<ng-view>
</ng-view>
</div>
<script src="js/angular.min.js"></script>
<script src="js/ui-bootstrap-tpls-0.14.3.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
makegray.html (the html content I want to inject into index.html)
<html ng-app="app">
<head>
<link rel="stylesheet" href="../css/bootstrap.min.css" />
</head>
<body ng-controller="MainController">
<nav class="navbar navbar-default">
<div class="container"> <!-- top intro part -->
<div class="navbar-header">
<a class="navbar-brand" href="#/"> MAKE GRAY</a>
</div>
</div>
</nav>
<form action="../php/makegray.php" method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
</form>
<script src="js/angular.min.js"></script>
<script src="js/ui-bootstrap-tpls-0.14.3.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
angularJS
var app = angular.module("app", ["ui.bootstrap"]);
/*app.factory("API", function($http) {
return {
getFilters: function(callback) {
$http.get("filters.php").success(callback);
}
}
});*/
app.controller("MainController", function($scope) {
$scope.ListOfOpenCV = {}; // declare array
// $scope.ListOfOpenCV.filter = "";
$scope.filters = ["MakeGray", "Sobel"];
//$scope.ListOfOpenCV.filter = $scope.filters[0];
$scope.GoToOpenCVpage = function(filter){
if(filter === "MakeGray"){
// window.location("pages/Canny.html");
window.open("pages/MakeGray.html", "_blank","height = 400, width = 700");
}
};
});
My app is running Cordova with AngularJS routing. I need the InAppBrowser plugin to view pdfs. However, since ngroute calls an html on a route change InAppBrowser is called.
I only need it to run on button click not everytime.
-- edit --
When I have the Cordova InAppBrowser plugin installed I get a white screen and a message regarding a white list issue regarding my inital route "index.html":
$routeProvider
.when('/', { //load home at start
controller: 'HomeController as homeSlides',
templateUrl: 'content/home.html',
resolve: {
// I will cause a 1 second delay
delay: function ($q, $timeout) {
var delay = $q.defer();
$timeout(delay.resolve, 1000);
var dl = document.getElementById('door-left');
var dr = document.getElementById('door-right');
dl.classList.remove('open');
dr.classList.remove('open');
return delay.promise;
}
}
})
If I uninstall the plugin the issue is resolved.
-- edit --
This is the error I'm getting:
HTML1300: Navigation occurred.
[object Object]
APPHOST9623: The app couldn’t resolve ms-appx://25052ninjadrew.nanosales/www/[object Object] because of this error: RESOURCE_NOT_FOUND.
APPHOST9613: The app couldn’t navigate to ms-appx://25052ninjadrew.nanosales/www/[object Object] because of this error: 80004005.
new transaction is waiting for open operation
HTML1527: DOCTYPE expected. Consider adding a valid HTML5 doctype: "<!DOCTYPE html>".
[object Object] (1,1)
DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337
index.html
-- edit --
For client reasons I can't show too much of my html but...
<!DOCTYPE html>
<html ng-app="nanoApp" class="test">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<script src="js/winstore-jscompat.js"></script>
<script src="js/min/iscroll-min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/ngroute.min.js"></script>
<script src="js/angular-sanitize.js"></script>
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script src="js/database.js"></script>
<script src="js/angular-script.js"></script>
</head>
<body class="{{bodyclass}}">
<div id="door-left" style="background-image:url('img/trans-left.png');" class="loading door-left" ></div>
<div id="door-right"style="background-image:url('img/trans-right.png');" class="loading door-right" ></div>
<div id="nav">
<ul>
<li><span id="menu-cls" class="ion-close-round"></span></li>
<li><div class="ion-grid"></div>Home</li>
<li><div class="ion-grid"></div>Products</li>
<li><div class="ion-grid"></div>Installations</li>
<li><div class="ion-grid"></div>Videos</li>
<li><div class="ion-grid"></div>Favorites</li>
<li><div class="ion-grid"></div>Marketing Materials</li>
</ul>
</div>
<div id="head">
<div id="left-head">
<div id="menu-btn"></div>
<img src="img/header-left-x2.png" />
<div class="filler"></div>
</div>
<div id="middle-head">
<a style="display:block;" href="#/"><div id="logo"></div></a>
</div>
<div id="right-head">
<img src="img/header-right-x2.png" />
</div>
<div class="swipe-indicator"><span class="ion-chevron-left three"></span><span class="ion-chevron-left two"></span><span class="ion-chevron-left one"></span> Swipe <span class="ion-chevron-right one"></span><span class="ion-chevron-right two"></span><span class="ion-chevron-right three"></span></div>
</div>
<div id="content" class="scroller" ng-view>
</div>
<div id="footer">
<ul id="footer-btns">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="filler"></div>
<img src="img/bottom-bar-x2.png" class="bottom-bar" />
</div>
<!-- gallery popup -->
<div id="gallery-container" ng-show="openGallery">
<div class="ion-close-round close-gallery" ng-click="closeGallery()"></div>
<div id="left-arrow" class="arrow" ng-click="prevSlide()" ng-show="galleryCount > 1"></div>
<div id="slide-container">
<div id="slides">
<div class="slide" ng-repeat="slide in gallery" ng-switch on="galleryType" video-setup>
<!-- image template-->
<img ng-src="{{slide.file}}" ng-switch-when="image" />
<!-- video template-->
<video class="video" style="width:845px;height:635px;" controls autoplay ng-switch-when="video">
<source ng-src="{{slide.file}}" type='video/mp4' />
</video>
</div>
</div>
</div>
<div id="slide-marker-container" ng-show="galleryCount > 1">
<ul id="slide-markers">
<li ng-repeat="marker in galleryMarkers(galleryCount) track by $index" marker-setup>
<div ng-click="scrollToSlide({{$index}})"></div>
</li>
</ul>
</div>
<div id="right-arrow" class="arrow" ng-click="nextSlide()" ng-show="galleryCount > 1"></div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/stellar.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
home.html:
<div id="home" set-iscroll home-setup class="container paralax">
<a href="#/productslist/0" class="section">
<div style="background-image:url('img/home/slim-home-bkg.jpg');" class="bkg"></div>
<div style="background-image:url('img/home/slim-title.png');" class="element layer1" data-stellar-ratio="1.3"></div>
<div id="slim-holt-top" class="indicator"><div style="background-image:url('img/home/slim-holt-top.png');" class="element title" data-stellar-ratio="1.3"></div></div>
<div id="slim-lv-top" class="indicator"><div style="background-image:url('img/home/slim-lv-top.png');" class="element layer2" data-stellar-ratio="1.7" data-stellar-ratio="2"></div></div>
<div id="slim-mel-top" class="indicator"><div style="background-image:url('img/home/slim-mel-top.png');" class="element layer3" data-stellar-ratio="1.3"></div></div>
<div id="slim-avyve-top" class="indicator"><div style="background-image:url('img/home/slim-avyve-top.png');" class="element layer4" data-stellar-ratio="1.2"></div></div>
</a>
<a href="#/productslist/1" class="section">
<div style="background-image:url('img/home/curve-home-bkg.jpg');" class="bkg"></div>
<div style="background-image:url('img/home/curve-title.png');" class="element title" data-stellar-ratio="1.3"></div>
<div id="curve-aig-top" class="indicator"><div style="background-image:url('img/home/curve-aig-top.png');" class="element layer1" data-stellar-ratio="1.7"></div></div>
<div id="curve-illy-top" class="indicator"><div style="background-image:url('img/home/curve-illy-top.png');" class="element layer2" data-stellar-ratio="1.5" data-stellar-ratio="2"></div></div>
<div id="curve-minn-top" class="indicator"><div style="background-image:url('img/home/curve-minn-top.png');" class="element layer3" data-stellar-ratio="1.2"></div></div>
</a>
<a href="#/productslist/2" class="section">
<div style="background-image:url('img/home/clear-home-bkg.jpg');" class="bkg"></div>
<div style="background-image:url('img/home/clear-title.png');" class="element title" data-stellar-ratio="1.3"></div>
<div id="clear-top" class="indicator"><div style="background-image:url('img/home/clear-top.png');" class="element layer1" data-stellar-ratio="1.5"></div></div>
</a>
<a href="#/productslist/3" class="section">
<div style="background-image:url('img/home/wrap-home-bkg.jpg');" class="bkg"></div>
<div style="background-image:url('img/home/wrap-title.png');" class="element title" data-stellar-ratio="1.3"></div>
<div id="wrap-eaton-top" class="indicator"><div style="background-image:url('img/home/wrap-eaton-top.png');" class="element layer2" data-stellar-ratio="1.2"></div></div>
<div id="wrap-gte-top" class="indicator"><div style="background-image:url('img/home/wrap-gte-top.png');" class="element layer3" data-stellar-ratio="1.5"></div></div>
</a>
<a href="#/productslist/4" class="section">
<div style="background-image:url('img/home/slimengage-home-bkg.jpg');" class="bkg"></div>
<div style="background-image:url('img/home/slimengage-title.png');" class="element title" data-stellar-ratio="1.3"></div>
<div id="slimengage-screen" class="indicator"><div style="background-image:url('img/home/slimengage-screen.png');" class="element layer1" data-stellar-ratio="1.1"></div></div>
<div id="slimengage-blueppl" class="indicator"><div style="background-image:url('img/home/slimengage-blueppl.png');" class="element layer2" data-stellar-ratio="1"></div></div>
<div id="slimengage-colorppl" class="indicator"><div style="background-image:url('img/home/slimengage-colorppl.png');" class="element layer3" data-stellar-ratio="1.5"></div></div>
</a>
</div>
I have been following the docs for ui-bootstrap. And in the section(ui.bootstrap.collapse) they talk about making a collapse function for content when you click a button.
But I cannot seem to make the Collapse seem to work in my code.
What am I missing or doing wrong?
I have looked at other Stacks and have seen that other people use anchor tags instead of button tags. So I don't think that is the issue.
Index HTML
<!DOCTYPE html>
<html lang="en" data-ng-app="app">
<head>
<meta charset="UTF-8">
<meta name="description" content="stuff">
<meta name="keywords" content="stuff">
<meta name="author" content="stuff">
<title> Title</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css">
<!-- Custom styles -->
<link href="css/style.css" rel="stylesheet">
<link href="css/svg_style.css" rel="stylesheet">
<!--Jquery -->
<script src="lib/jquery/dist/jquery.min.js"></script>
<!-- Angular -->
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular-route/angular-route.min.js"></script>
<script src="lib/angular-animate/angular-animate.min.js"></script>
<script src="lib/angular-cookies/angular-cookies.min.js"></script>
<!-- Bootstrap -->
<script src="lib/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="lib/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
</head>
<body id="index_body">
<div data-ng-controller="HeaderCtrl">
<div class="top-header" data-ng-include="templateUrl"></div>
</div>
<div class="page [[ pageClass ]]" ng-view autoscroll="true"></div>
<!-- Main JS -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/headerCtrl.js"></script>
<script src="js/controllers/modal.js"></script>
<script src="js/controllers/ResonanceCtrl.js"></script>
<script src="js/controllers/ContactCtrl.js"></script>
<script src="js/controllers/LandingCtrl.js"></script>
<script src="js/controllers/SignInCtrl.js"></script>
<!-- Directives -->
<!-- <script src="js/directives/LandingAnimation.js"></script> -->
<script src="js/jq.js"></script>
</body>
</html>
Landing Page HTML
<div class="col-xs-12 col-sm-12 col-md-5">
<div class="caption">
<h1 class="text-left h-color thin">
Text Header
</h1>
<p class="lead p-color">More Text</p>
<!-- Here is my Toggle Button --> <a class="lead p-color learn-button togglebtn shake shake-rotate" data-ng-click="isCollapsed = !isCollapsed">
<small>
<i class="glyphicon" data-ng-class="{'glyphicon-minus': status.open, 'glyphicon-plus': !status.open}"></i> Learn More
</small>
</a>
</div>
</div>
<div class="hidden-xs hidden-sm col-md-7 col-lg-offset-1 col-lg-6">
<img alt="Image" class="img-responsive center-block" src="images/kip-animation.png" />
</div>
<!--Here is the what I want to collapse -->
<div id="myContent" collapse="isCollapsed" class="row row-offset row-pad" style="margin: 0 30px">
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="lead caption text-center">
<h3 class="h-color2">Item 1</h3>
</div>
<div class="thumbnail">
<img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
</div>
<div class="lead caption">
<p class="p-color"><small>Text</small>
</p>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="lead caption text-center">
<h3 class="h-color2">Item 2</h3>
</div>
<div class="thumbnail">
<img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
</div>
<div class="lead caption">
<p class="p-color"><small>Text</small>
</p>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="lead caption text-center">
<h3 class="h-color2">Item 3</h3>
</div>
<div class="thumbnail">
<img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
</div>
<div class="lead caption">
<p class="p-color"> <small>Some Text</small>
</p>
</div>
</div>
</div>
<!-- END DROPDOWN-->
App Javascript
var app = angular.module('app', ['ui.bootstrap', 'ngRoute', 'ngAnimate']);
app.config(function($interpolateProvider, $routeProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
$routeProvider
.when('/', {
templateUrl : 'pages/LandingPage.html',
controller : 'LandingCtrl'
})
.otherwise({ redirectTo: '/signin'});
});
Controller Javascript
app.controller('LandingCtrl', function($scope) { // jshint ignore:line
$scope.pageClass = 'page-landing';
$scope.isCollapsed = true;
});
I solved the issue. I was using Jquery before to toggle the display either hidden or shown.
In my Css I had:
myContent {
display: none;
}
Once I deleted that. It worked perfectly fine.