I am facing problem in making two way binding to a form model inside the tabs which is under ng-if condition.
Plunker link to my problem is
http://plnkr.co/edit/F5h8eCu7IlXlwi1XhdV7?p=preview
I have tried all ways possible but the scope variables aren't recognized under the tabset.
The scope variables are accessed in "ng-if" part using the $parent reference but for some reason the tab set doesnt recognize any of these value . any help or hint will be helpful
The code is as follows
// Code goes here
var app =angular.module('textModule',['ui.bootstrap']);
app.controller('checktest',function($scope){
$scope.step= 0;
$scope.configFormData = "angular test";
$scope.configFormData2 = "angular test 2";
});
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css#*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="jquery#2.1.3" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script data-require="angular-ui-bootstrap#*" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="textModule">
<div ng-controller="checktest">
<div ng-form="configForm">
<div class="general" ng-if="step == 0">
{{$parent.configFormData}} <br />
{{$parent.configFormData2}}
<tabset class="nav nav-tabs">
<tab>
<tab-heading>tab 1</tab-heading>
<div role="tabpanel" class="tab-pane active" id="network" aria-labelledby="network-tab">
{{$parent.configFormData}}
<input type="text" ng-model="$parent.configFormData" />
</div>
</tab>
<tab>
<tab-heading>tab 2 </tab-heading>
<div role="tabpanel" class="tab-pane" id="region" aria-labelledby="region-tab">
<input type="text" ng-model="$parent.configFormData2" />
</div>
</tab>
</tabset>
</div>
</div>
</div>
</body>
</html>
In Angular inheritance of scope variables works with objects only, not with direct scope properties.
https://github.com/angular/angular.js/wiki/Understanding-Scopes
Try using some data object and bind to the object:
app.controller('checktest',function($scope){
$scope.step = 0;
$scope.data = {
configFormData: "angular test",
configFormData2: "angular test 23",
};
});
<input type="text" ng-model="data.configFormData" />
By the way: You don't need the $parent in your case.
Update your html to as written below and it should work. As mentioned by mattanja you dont need parentScope
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css#*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="jquery#2.1.3" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script data-require="angular-ui-bootstrap#*" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="textModule">
<div ng-controller="checktest">
<div ng-form="configForm">
<div class="general" ng-if="step == 0">
{{$parent.configFormData}} <br />
{{$parent.configFormData2}}
<tabset class="nav nav-tabs" >
<tab>
<tab-heading>tab 1</tab-heading>
<div role="tabpanel" class="tab-pane active" id="network" aria-labelledby="network-tab">
{{configFormData}}
<input type="text" ng-model="configFormData" />
</div>
</tab>
<tab>
<tab-heading>tab 2 </tab-heading>
<div role="tabpanel" class="tab-pane" id="region" aria-labelledby="region-tab">
<input type="text" ng-model="configFormData2" />
</div>
</tab>
</tabset>
</div>
</div>
</div>
</body>
</html>
Related
I have header.html and footer.html in root .my main page is in the folder "MainPages".I use script to call header.html and footer.html.
but I can not see Header.html and footer.html when I double click on the the page .
here is my folders and my Mainpage("bio.html")(bio.html is in the MainPages"folder).
<head>
<title></title>
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<link href="../Content/normalize.min.css" rel="stylesheet" />
<link href="../Content/font-awesome.min.css" rel="stylesheet" />
<script src="../Scripts/jquery-1.10.1.min.js"></script>
<script src="../Scripts/bootstrap.min.js"></script>
<link href="../Content/css/animate.css" rel="stylesheet" />
<script src="../Scripts/modernizr-2.6.2.min.js"></script>
<script src="../Scripts/revealOnscroll.js"></script>
<link href="../Content/ava.css" rel="stylesheet" />
<script>
$(function () {
$("#Header").load("../Header.html");
});
</script>
<script>
$(function () {
$("#Footer").load("../Footer.html");
});
</script>
</head>
<body style="background-image: url(../images/sample_bg.jpg);">
<!--header-part-->
<div id="Header"></div>
<br /><br /><br /><br /><br /><br /><br /><br />
<div class=" container-fluid col-md-offset-2 row col-md-8 col-md-offset-2 "
style=" font-family: Mitra;background-image:url(../images/bio/bio-2.jpg);background-size:500px,500px;
background-repeat: no-repeat;background-position-x:right;background-position-y:top;
background-color:#fff ;clear:none;padding: 0px;">
<div class="container-fluid ">
<div class="row ">
<div class=" col-md-offset-1 col-md-9 ">
<div class="row">
<div class="bio-contex-1">
<span>
this is my main page for testing
</span>
</div>
</div>
<br />
</div>
</div>
</div>
</div>
<!--footer-->
<div id="Footer"></div>
</body>
</html>
You need to run a local webserver, as you might be getting problems loading file in jquery underfile:///
Set up a webserver and then try to load them again.
Use npm : http-server
change ../ to /
e.g
<link href="/Content/bootstrap.min.css" rel="stylesheet" />
So i am trying to export a specific div to a PDF file and i am failing miserably...
This is the page:
<!DOCTYPE HTML>
<html>
<head>
<title>Testpage</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<!--[if lte IE 8]><script src="../assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="../assets/css/jquery.dataTable.min.css" />
<link rel="stylesheet" href="../assets/css/main.css" />
<link rel="stylesheet" href="../assets/css/toastr.css" />
<link rel="stylesheet" href="../assets/css/chart.css" />
<!--[if lte IE 9]><link rel="stylesheet" href="../assets/css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="../assets/css/ie8.css" /><![endif]-->
</head>
<body>
<!-- Wrapper -->
<div id="wrapper">
<!-- Main -->
<div id="main">
<div class="inner" id="inner">
<!-- Header -->
<header id="header">
<h2><strong>Test</strong></h2>
</header>
<!-- Content -->
<section>
<!-- Table -->
<h3>Table</h3>
<div class="table-wrapper">
<table id="myTable">
<thead>
<tr>
<th>Time</th>
<th>Speed</th>
<th>Meters</th>
</tr>
</thead>
<tbody>
<?php
require_once ('showData.php');
?>
</section>
</div>
</div>
<!-- Sidebar -->
<div id="sidebar">
<div class="inner">
<!-- Menü -->
<nav id="menu">
<header class="major">
<h2>Menü</h2>
</header>
<ul>
<li>Home</li>
<li>
<span class="opener">Test</span>
<ul>
<li>Test1</li>
<li>Test2</li>
</ul>
</li>
</ul>
</nav>
<!-- Filter -->
<section>
<header class="major">
<h2>Filter</h2>
</header>
<form method="post" id="submitdata" name="submitdata">
<div class="row uniform">
<div class="12u 12u$">
<input type="text" name="datefrom" id="datefrom" value="" placeholder="Date from" />
</div>
<div class="12u 12u$">
<input type="text" name="dateto" id="dateto" value="" placeholder="Date to" />
</div>
<div class="12u$">
<div class="select-wrapper">
<select name="dropdown" id="dropdown">
<option value="0">- Choose -</option>
<option value="1">All</option>
<option value="2">Speed</option>
<option value="3">Meter</option>
</select>
</div>
</div>
<div class="12u$">
<ul class="actions">
<li><input type="submit" id="btnSubmit" value="Clickme" class="special" /></li>
<li><input type="reset" value="Reset" /></li>
</ul>
</div>
</div>
</form>
</section>
<!-- Exportmenü -->
<section>
<header class="major">
<h2>Export</h2>
</header>
<div class="12u 12u$">
<button id="btnExport" class="button special icon fa-file-pdf-o">Export as PDF</button>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<p> Stuff </p>
</footer>
</div>
</div>
</div>
<!-- Scripts -->
<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/skel.min.js"></script>
<script src="../assets/js/util.js"></script>
<script src="../assets/js/jquery.dataTables.min.js"></script>
<!--[if lte IE 8]><script src="../assets/js/ie/respond.min.js"></script><![endif]-->
<script src="../assets/js/main.js"></script>
<script src="../assets/js/toastr.js"></script>
<script src="../assets/js/submitData.js"></script>
<script>
$(document).ready(function() {
$('#myTable').DataTable( {
"pagingType": "full_numbers"
});
});
</script>
</body>
</html>
I am trying to get everything in <div class="inner" id="inner"> into an PDF-File but nothing seems to work. I tried with jsPDF and html2canvas (html -> img -> pdf) but the quality is VERY bad. Nothing else seems to work.
I would appreciate some pointers like what i can use to get it working.
Thank you very much,
Skar
EDIT:
This is what i included after the jsPDF recommendation
<script src="../assets/jsPDF/jspdf.debug.js"></script>
<script src="../assets/jsPDF/examples/js/html2canvas.js"></script>
<script>
var doc = new jsPDF();
var specialElementHandlers = {
'#header': function(element, renderer){
return true;
}
};
$('#btnExport').click(function(){
var html=$("#inner").html();
doc.fromHTML(html,0,0, {
'width': 500,
'elementHandlers': specialElementHandlers
});
doc.save("Test.pdf");
});
</script>
Try this library, it is built for client side PDF generation.
https://parall.ax/products/jspdf
Here is the github link
I have 2 html page and one app.js
my search-movie.html code as the following :
<!DOCTYPE html>
<html ng-app="adphorusWork">
<head lang="en">
<meta charset="UTF-8">
<title>Search Movie</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.min.js"></script>
<script src="scripts/jquery-1.9.1.min.js"></script>
<script src="app/app.js"></script>
</head>
<body ng-controller="searchMovieController">
<div class="navbar navbar-default navbar-fixed-top" style="margin-top: 20px;">
<div class="container-fluid">
<ul>
<li>
OMDb Api
</li>
</ul>
</div>
</div>
<div class="container" style="margin-top: 50px;">
<div class="bs-docs-section" id="">
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h2>My Github</h2>
</div>
<div class="bs-component">
<form class="well form-search" id="search-movie" onsubmit="return false;">
<fieldset>
<legend>Search Movie</legend>
</fieldset>
<div>
<label class="control-label" for="movie-name">Movie Name : </label>
<input type="text" id="movie-name" class="input-small" style="margin-left: 10px;">
<button id="btn-search-movie" type="button" class="btn-sm btn-primary" style="margin-left: 10px;" ng-click="searchMovie()">
<span class="glyphicon glyphicon-search"> Search</span>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
and my result-movie.html code as the following :
<!DOCTYPE html>
<html>
<head ng-app="adphorusWork">
<meta charset="UTF-8">
<title>Search Movie</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.min.js"></script>
<script src="app/app.js"></script>
<script src="scripts/jquery-1.9.1.min.js"></script>
</head>
<body ng-controller="resultMovieController">
<div class="navbar navbar-default navbar-fixed-top" style="margin-top: 20px;">
<div class="container-fluid">
<ul>
<li>
OMDb Api
</li>
</ul>
</div>
</div>
<div class="container" style="margin-top: 50px;">
<div class="bs-docs-section" id="">
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h2>My Github</h2>
</div>
<div class="bs-component">
<fieldset>
<legend>Result for Search Movie</legend>
</fieldset>
<div>
<button id="btn-result-movie" type="button" class="btn-sm btn-primary" style="margin-top: 40px;" ng-click="backtohome()">
<span class="glyphicon glyphicon-circle-arrow-left"> Home</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
and my app.js as the following :
(function (angular) {
'use strict';
var app = angular.module('adphorusWork', []);
app.controller('searchMovieController', function ($scope) {
$scope.searchMovie = function () {
alert("come")
}
});
app.controller('resultMovieController', function ($scope) {
$scope.backtohome = function () {
alert("home")
}
});
})(angular);
My search button is working (in search-movie.html) but my 'Home' button not working(in result-movie.html)
I'm using the same ng-app in two html page. I want to work on other button(so Home button)
Where am I doing wrong ? or How can I fix this error ?
you need to use Angular Ui router for this. And #Lex is correct you are not following the angular SPA framewrok.
This is a good read :https://github.com/angular-ui/ui-router
this link can provide a brief detail about angular ui router https://scotch.io/tutorials/angular-routing-using-ui-router
You don't have:
<script src="app/app.js"></script>
in your result-movie.html page. The bigger question, though, is why are you structuring it like this? Angular is designed as a single page application (SPA) framework. The way you are buidling it I think you are going to end up with a lot of issues long term.
I have noticed that you not include in result-movie.html page
<script src="app/app.js"></script>
as for best approach is you can use ngRoutefor data passing between controllers
I am using isteven-multi-select in my application for multiple selection. Everything works fine until I add isteven-multi-select div in another template. In that case, I dont get any values in output-model.
Plunker
Here , I am addding it in another template
<body ng-controller="MainCtrl">
<div ng-include="'test.html'"></div>
<button ng-click="a()">Print output</button>
<p>selected scope: {{ selectedScope }}</p>
</body>
test.html --
<section>
<div>
<div isteven-multi-select
input-model="scopes"
output-model="selectedScope"
button-label="name"
item-label="name"
tick-property="ticked"
>
</div>
</div>
</section>
ng-include creates new scope that inherits all parents scope properties. So you should pass parents selectedScope to output-model attribute:
<section>
<div>
<div isteven-multi-select
input-model="scopes"
output-model="$parent.selectedScope"
button-label="name"
item-label="name"
tick-property="ticked"
>
</div>
</div>
</section>
You can read this article for better understanding of scopes.
it works once you include the element in your main controller view
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.2.x" src="https://code.angularjs.org/1.2.21/angular.js" data-semver="1.2.21"></script>
<link rel="stylesheet" href="angular-multi-select.css" />
<script src="angular-multi-select.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<section>
<div>
<div isteven-multi-select
input-model="scopes"
output-model="selectedScope"
button-label="name"
item-label="name"
tick-property="ticked"
>
</div>
</div>
</section>
<button ng-click="a()">Print output</button>
<p>selected scope: {{ selectedScope }}</p>
<p>selected scope: {{ scopes }}</p>
</body>
</html>
I have this index.html which has a navbar in the which is seen on all pages of my single page application. The navbars container div is using the ng-controller="LoginCtrl" value, so I will also include that controller from my angular application (app.js)
For some reason, the variables username and password which are bound via ng-model are showing as undefined when doLogin() is called via ng-click directive? That is after I type values into the text boxes that are bound to my controllers variables.
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="stylesheet.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-route.min.js"></script>
<base href="/">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.9/ngStorage.js"></script>
<script src="https://cdn.socket.io/socket.io-1.3.5.js"></script>
</head>
<body>
<div ng-controller="LoginCtrl">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">TriviaAttack!</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form ng-if="!loggedIn" id="loginForm" class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control" ng-model="username">
</div>
<div class="form-group">
<input type="text" placeholder="Password" class="form-control" ng-model="password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-success" ng-click="doLogin()">Sign In</button>
</div>
</form>
</div>
</div>
</nav>
<div ng-view></div>
</div>
<script src="./app/app.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</body>
</html>
app.js
...
myApp.controller('LoginCtrl', function($rootScope, $location, AuthService, AuthToken) {
$rootScope.doLogin = function() {
console.log($rootScope.username);
console.log($rootScope.password);
}
});
...
An inputModel primitive property will be created on that ng-controller's scope when you type into the text field. input model is generated in the current scope, not the rootScope.
var app = angular.module('myApp', []);
app.controller('LoginCtrl', function($scope, $http) {
$scope.doLogin = function() {
console.log($scope.username);
console.log($scope.password);
}
});
Check it out on Plunker
Use model rather than using primitive types.
You should use $rootScope.user.name (ng-model will be user.name) rather than using $rootScope.username and $rootScope.user.password(ng-model will be user.password) instead of $rootScope.password
This problem actually happens for javascript's prototypical model. And if you want to know it's applicability in angularjs, you can go through this article. This will definitely help :)
Edit: As you are running into problem making that code work, I've made a working copy of your code. Please have a look at it:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="stylesheet.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-route.min.js"></script>
<base href="/">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.9/ngStorage.js"></script>
<script src="https://cdn.socket.io/socket.io-1.3.5.js"></script>
</head>
<body>
<div ng-controller="LoginCtrl">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">TriviaAttack!</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form ng-if="!loggedIn" id="loginForm" class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control" ng-model="user.name">
</div>
<div class="form-group">
<input type="text" placeholder="Password" class="form-control" ng-model="user.password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-success" ng-click="doLogin()">Sign In</button>
</div>
</form>
</div>
</div>
</nav>
<div ng-view></div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
<script>
var myApp = angular.module("myApp", []);
myApp.controller('LoginCtrl', function ($scope, $location) {
$scope.user = { name: "", password: "" };
$scope.doLogin = function () {
console.log($scope.user.name);
console.log($scope.user.password);
}
});
</script>
use $scope instead of $rootScope for getting the ng-model in controller.
I found the answer to my own question after some frustration. Adding username and password arguments to my doLogin() function, then using the directive ng-click="doLogin(user.name, user.pass)" works as I wanted. No clue why it wasn't working the way I was trying, but oh well.