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>
Related
I am using bootstrap's popover, but I don't want the popover overflow it's wrapper, any ideas?
Demo on Plunker
<!DOCTYPE html>
<html>
<head>
<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>
<script data-require="bootstrap.js#*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" data-semver="3.3.6" data-require="bootstrap-css#*" />
<script src="controller.js"></script>
<script id="calendar.html" type="text/ng-template">
<uib-datepicker ng-model="date" show-weeks="false">
</datepicker>
</script>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="popover.css">
</head>
<body>
<div ng-app="my-app" ng-controller="controller">
<div class="card">
<div class="card-panel">
<div class="card-body">
<div class="row">
<p>BAbababababbabababababababababababababbabaabbabaabababbBAbababababbabababababababababababababbabaabbabaabababbBAbababababbabababababababababababababbabaabbabaabababb</p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-panel">
<div class="card-body">
<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" ng-repeat="item in weaponItems">
<div class="col-xs-12">
<div class="col-xs-6" ng-click="selectItem(item)" uib-popover-template="'popover.html'" popover-is-open="isOpen && item === selectedItem" popover-trigger="click" popover-placement="auto right">
<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 class="col-xs-6">
<div class="panel" style="text-align:center;">
<img src="{{item.img}}" height="120px" width="auto">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I think I don't make my question clear, see the attached imagethe red line surrounded area is the card-panel area, and the green line surrounded is the popover. Here, I don't want the popover beyond the panel area.
Declare word-wrap on the overflowing element.
.card-body p{
word-wrap: break-word;
}
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();
I have just started with learning AngularJS and everthing works great before I started to write some easy controller method and method doesn't work even i include ng-contoller I tried to include it as separated js file but that also doens't work I am new to angularJS so I would appreciate any help I also tried with notped++ to do the same but doesn't work this is my code;
<!DOCTYPE html>
<html data-ng-app="">
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/jquery-1.9.1.min.js"></script>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/angular.min.js"></script>
</head>
<body>
<div class="container" data-ng-controller="AppController">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Contact Manager</a>
</div>
<div class="collapse navbar-collapse" id="nav-toggle">
<ul class="nav navbar-nav">
<li class="alert-success">Browse</li>
<li>Add contacts</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<input type="text" class="form-control" placeholder="Search"/>
</form>
</div>
</nav>
<div class="page-header">
<h2>Prvo poglavlje <small>Hello world</small></h2>
</div>
<div class="container">
<div class="jumbotron">
<h1>Hello, {{name||"World"}}</h1>
<input type="text" class="form-control input-lg" data-ng-model="name" />
</div>
<div class="row">
<div class="col-sm-8 pull-right hidden-lg" >
<div class="row">
<div class="col-sm-6">
<p>Prvi</p>
</div>
<div class="col-sm-6">
<p>Drugi</p>
</div>
</div>
</div>
<div class="col-sm-4 pull-left show" >
This is our sidebar
</div>
</div>
<div class="row">
<div class="col-md-8">
<button ng-click="clickHandler()">Click me</button>
</div>
</div>
</div>
</div>
<script>
function AppController($scope) {
$scope.clickHandler = function () {
window.alert("Clicked");
};
}
</script>
</body>
</html>
You have to define a module before instantiate your controller:
angular
.module('app', [])
.controller('AppController', AppController);
AppController.$inject = ['$scope'];
function AppController($scope) {
$scope.clickHandler = function () {
window.alert("Clicked");
};
}
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
<div class="container" ng-controller="AppController">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Contact Manager</a>
</div>
<div class="collapse navbar-collapse" id="nav-toggle">
<ul class="nav navbar-nav">
<li class="alert-success">Browse</li>
<li>Add contacts</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<input type="text" class="form-control" placeholder="Search" />
</form>
</div>
</nav>
<div class="page-header">
<h2>Prvo poglavlje <small>Hello world</small></h2>
</div>
<div class="container">
<div class="jumbotron">
<h1>Hello, {{name||"World"}}</h1>
<input type="text" class="form-control input-lg" data-ng-model="name" />
</div>
<div class="row">
<div class="col-sm-8 pull-right hidden-lg">
<div class="row">
<div class="col-sm-6">
<p>Prvi</p>
</div>
<div class="col-sm-6">
<p>Drugi</p>
</div>
</div>
</div>
<div class="col-sm-4 pull-left show">
This is our sidebar
</div>
</div>
<div class="row">
<div class="col-md-8">
<button ng-click="clickHandler()">Click me</button>
</div>
</div>
</div>
</div>
</body>
</html>
You have not defined the module anywhere in the code,
In View:
<html ng-app="myApp">
In JS:
var app = angular.module("myApp", []);
Working Sample
You need to include the angular module. Angular works with modules.
Controllers are part of module.
Try something like this:
app = angular.module("myApp", []);
app. Controller(...);
And use this module in your html like
<html ng-app="myApp">
Also,
The controller declaration you are using is old.
Try this:
app.controller('controllerName', ['$scope', function($scope){...}]);
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");
}
};
});
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.