HTML file - directive template
<div class='class1'>
<span ng-show="Edit1">
<script type="text/ng-template" id="editdetails.html">
<div class="modal">
<h3>Update Unit Details</h3>
<input type='text' name='email' value=''>
</div>
</script>
</span>
</div>
<div class='class2'>
<span ng-show="Edit2">
Some content
</span>
</div>
Angular JS code
I am loading this into html file called directive template and then want to get only the ng-template content of editdetails.html how to do that?
var directiveTemplate = null;
var req = new XMLHttpRequest();
req.onload = function () {
directiveTemplate = this.responseText;
};
var url1 = 'directivetemplate.html';
req.open('get', url1, false);
req.send();
$templateCache.put('template.html', directiveTemplate);
$edittemplate=directiveTemplate;
//The below code doesn't get me content inside the editdetails
$templateCache.put('editdetails.html',$edittemplate.filter('#editdetails.html').html());
Obviously you could read more about $templateCache and script documentation at Official AngularJS website. Other option is to try this one.
angular
.module("Example", [])
.controller("ExampleCtrl", ExampleCtrl);
ExampleCtrl.$inject = ['$scope', '$templateCache'];
function ExampleCtrl($scope, $templateCache) {
$scope.getContent = function() {
var script = document.getElementsByTagName("script");
var id = script[2].id;
var htmlContent = $templateCache.get(id);
document.getElementById("display").innerHTML = htmlContent;
};
}
/* Styles go here */
.content {
background-color: green;
color: white;
padding: 10px;
}
.button {
width: 150px;
padding: 10px;
background-color: red;
color: white;
border: 0px white solid;
border-radius: 5px;
}
<!DOCTYPE html>
<html ng-app="Example">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-controller="ExampleCtrl">
<script type="text/ng-template" id="templateId.html">
<p class="content">This is the content of the template</p>
</script>
<p>
<input type="button" class="button" ng-click="getContent()" value="Get Template's Content">
</p>
<div id="display"></div>
</body>
</html>
Related
I make a login page with angular
it seem like angular is not even loading in mobile i used a variable to test the angular is loaded or not in desktop browser it work but when i run it on my phone angular is not load and variable is not printing
$scope.test= 122;
Don't know the problem cause, i also test after building but still same problem.
the login page is :
<!DOCTYPE html>
<html>
<head>
<title>Login </title>
<link href="css/loginnew.css" rel="stylesheet" type="text/css">
<script src="js/jquery-3.2.1.min.js"></script>
<!-- <script src="js/angular.js"></script>-->
<script src="js/angular.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/sweetalert.css" rel="stylesheet">
<!-- Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700|Lato:400,100,300,700,900' rel='stylesheet' type='text/css'>
<!-- <link rel="stylesheet" href="css/animate.css">-->
<!-- Custom Stylesheet -->
<!-- <link rel="stylesheet" href="css/loginstyle.css">-->
<style>
.errorlabel
{
color: red;
font-weight: normal;
width: 100%;
border-radius: 0px 0px 8px 8px;
padding: 0 10px;
background: rgba(128, 128, 128, 0.28);
}
</style>
</head>
<body ng-app="myApp" ng-controller="logincontroller">
<!--
you can substitue the span of reauth email for a input with the email and
include the remember me checkbox
-->
<div class="container">
<div class="card card-container">
<!-- <img class="profile-img-card" src="//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" alt="" /> -->
<img id="profile-img" class="profile-img-card" src="img/user.jpg" />
<p id="profile-name" class="profile-name-card"></p>
<form class="form-signin">
<span id="reauth-email" class="reauth-email"></span>
<input id="name" ng-model="username" placeholder=" username" type="text" style=" background-color: transparent;
border-style: solid;
border-width: 0px 0px 2px 0px;
border-color: black;
font-size: 17px;">
{{test}}
<input id="password" ng-model="password" placeholder=" **********" type="password" style=" background-color: transparent;
border-style: solid;
border-width: 0px 0px 2px 0px;
border-color: black;
font-size: 17px;">
<button class="btn btn-lg btn-primary btn-block btn-signin" ng-click="verifylogin(username , password)"> Login </button>
<span class="errorlabel">{{errormessage}}</span>
<a href="#" class="forgot-password">
Forgot the password?
</a>
</form>
</div><!-- /card-container -->
</div><!-- /container -->
</body>
<script> function ajaxcall(rurl,rdata,successfunc,title,message)
{
alert('aese hi');
rurl= "https://basit.co/"+rurl ;
$.ajax({
url: rurl, data: rdata ,
success: function(data)
{
//unblur();
data = JSON.parse(data);
//data.data = JSON.parse(data.data);
if(data.errors.length>0)
{
$.each(data.errors, function(ind,e){
console.log(" --"+e.message);
sweetw('Error', e.message);
});
}
else
{
if(successfunc)
{
successfunc(data);
return;
}
if(rdata.reload)
{
setTimeout(function(){location.reload()},2500);
}
console.log();
if(!title)
{
sweets("Success",'');
}else{
sweets(title,message);
}
}
},
error: function(jqXHR, textStatus, errorThrown)
{
// unblur();
console.log(jqXHR);
alert("Server Error");
},
type: 'POST' ,
});
}</script>
<script>
var app = angular.module('myApp', []);
app.controller('logincontroller', function($scope) {
$scope.loginuser="";
$scope.errormessage = "";
$scope.test= 122;
$scope.verifylogin = function (username,password){
ajaxcall("backend/accountf.php",{"verifylogin":true,username,password},function(response){
console.log(response.data);
if( username=="" || !username)
{
$scope.errormessage= response.data[0].errordetail;
}
else if(response.data[0].username == username)
{
$scope.loginuser = username ;
var currentpage = "/" + window.location.pathname.split('/')[1];
location.href ='indextest.html';
$scope.errormessage="";
}
else
{
$scope.errormessage= response.data[0].errordetail;
// alert(response.data[0].errordetail);
}
$scope.$digest();
}
);
}
});
</script>
</html>
I don't see your angular module (myApp) in the code... Try calling the script containing your angular module.
it work fine with android version greater then jellybean but not work with lower
so i send data with typescript format as ajaxcall("backend/accountf.php",{"verifylogin":true,"username":username,"password":password},function(response){
.
.
.
}
and now it work :)
I have a form in that I have to show suggestions for skills text field, I tried it with using ng-repat and list view, but my problem is if the user click on the available suggestions, I need that value in ng-model, I had given anchor tag for each li but it is not working please help me, thanks in advance. Below is the i tried code
<!Doctype html>
<html ng-app="myapp">
<head>
<script src="http://code.angularjs.org/1.2.4/angular.min.js"></script>
<script type="text/javascript">
var sampleapp = angular.module("myapp", []);
sampleapp.controller("myctrl", function($scope, $http){
$scope.fruits = ['php', 'python', 'perl', 'java', 'javascript', 'ajax', 'servlets', 'html', 'sap', 'sap/abap', 'sap/pico'];
$scope.selectQuasuggestions=function(sid){
$scope.query = sid;
}
});
</script>
<style type="text/css">
ul
{
background-color: #fff;
width: 12%;
padding: 5px;
margin: 1px;
overflow-y: scroll;
border:1px solid brown;
height: auto;
}
li{
padding-bottm: 5px;
line-height:20px;
}
</style>
</head>
<body>
<div ng-controller="myctrl">
<input type="text" ng-model="query" placeholder="enter your skills"/>
<div ng-show="query">
<ul style="list-style-type:none">
<li ng-repeat="fruit in fruits | filter:query"> {{quasuggestionss.name}}{{fruit}}</li>
</ul>
</div>
</div>
</body>
</html>
Try using <select> tag
<div ng-show="query">
<select ng-model="query">
<option ng-repeat="fruit in fruits | filter:query" class="ng-binding">{{fruit}}</option>
</select>
</div>
See the attached plunker for o/p
May be this will help you
OR
Use typeahead property of ui-bootstrap
check the following pluncker link for typeahead example
PLUNCKER
This is not working working<div id = "number_1" class="number" ng-click="selected='1'" ng-class="{active: selected=='1',firstactive: firstnumber=='1'}"><div class="number-text">1</div></div>but if I apply ng-class with child div it works fine.
Works for me. Can you check this
var demo = angular.module('demo', []);
demo.controller('DemoCtrl', function($scope) {
$scope.firstnumber = 1;
});
.active {
color: green;
}
.firstactive {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="demo">
<div ng-controller="DemoCtrl">
<div id="number_1" class="number" ng-class="{active: selected=='1',firstactive: firstnumber=='1'}" ng-click="selected='1'">
<div class="number-text">1</div>
</div>
</div>
</body>
I have a main index.html file and in that file, I want to include another .html using ng-include. This is my code:
(I will only upload the relevant code sections, if the whole code is needed, I can edit it)
index.html
<!DOCTYPE html>
<html>
<head>
<!-- include CAPH 3.0.1 default package -->
<link href="lib/caph/3.0.1/caph.min.css" rel="stylesheet" type="text/stylesheet">
<link href="styles/main.css" rel="stylesheet" type="text/stylesheet">
<!-- include jQuery file (you can use AngularJS & jQuery in your environment) -->
<script src="lib/caph/3.0.1/bower_components/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="lib/caph/3.0.1/bower_components/angular/angular.min.js" type="text/javascript"></script>
<!-- include the CAPH Package for AngularJS -->
<script src="lib/caph/3.0.1/caph-angular.min.js" type="text/javascript"></script>
</head>
<script>
var myApp = angular.module('myApp', ['caph.focus', 'caph.ui']);
myApp.factory('sharedProperties', function(){
var DEPTH={
MAIN_MENU: 1,
RESTAURANT: 2,
MOVIES: 3,
MOVIE_SELECT: 4
};
var currentDepth;
var focus = function($event) {
$($event.currentTarget).css({
border: '10px solid red'
});
}
var blur = function($event){
$($event.currentTarget).css({
border : '3px solid transparent'
});
}
var select = function($event){
if($event.target.id === "roomservice"){
currentDepth = DEPTH.RESTAURANT;
} else if($event.target.id === "vod"){
currentDepth = DEPTH.MOVIES;
} else if($event.target.id === "back"){
currentDepth = DEPTH.MAIN_MENU;
} else if($event.target.id === "fantasy"){
currentDepth = DEPTH.MOVIE_SELECT;
}
return currentDepth;
}
return{
focus: focus,
blur: blur,
select: select,
currentDepth: currentDepth,
depth: DEPTH
}
});
myApp.controller('myController', function($scope, sharedProperties) {
$scope.currentDepth = sharedProperties.depth.MAIN_MENU;
$scope.focus = function($event){
sharedProperties.focus($event);
}
$scope.blur = function($event){
sharedProperties.blur($event);
}
$scope.select = function($event){
$scope.currentDepth = sharedProperties.select($event);
console.log($scope.currentDepth);
}
$scope.items = [];
for (var i = 0; i < 20; i++) {
$scope.items.push({
text: i+1,
image: 'image/moviepics/' + (i%2 + 1) + '.jpg'
});
}
</script>
<body ng-app="myApp">
<div ng-controller="myController">
<div ng-if="currentDepth === 4">
<h1>Pick a movie</h1>
<div ng-include="'new.html'">
</div>
</div>
</div>
</div>
</body>
</html>
And this is new.html:
<style>
.list{
position: absolute;
width: 600px;
height: 135px;
overflow: hidden;
margin-bottom: 10px;
border: 1px solid transparent;
}
.item{
background: green;
box-sizing: border-box;
border: 3px solid white;
width: 200px;
height: 135px;
}
</style>
<caph-list container-class="list" on-focus-item-view="onFocusItemView($context)" items="item in items">
<div class="item" focusable data-focusable-initial-focus="{{$index===0?true:false}}">
<div class="test" style="width:100%; height:100%; background-size:100% 100%; background: url({{item.image || ''}})"></div>
</div>
</caph-list>
I am getting an ng-areq error with a WARNING of angular loaded more than once. For the full error, please see the attached picture.
I hope my question and code is clear
Any and all help is appreciated. Thank you.
When you include a template, HTML of relevant section of the page needs to be present in it.
In your new.html, you've included everything from the HTML tag which is unnecessary. Remove those and have only the necessary div and other elements.
I have an angular ngSwitch animation applied in 2 different ways, one within a directive, and one on the html page. The animation within the directive fires on page load. Why is this occurring and how to fix?
plunker: http://plnkr.co/edit/japvWhohw8JaDWkDBUAf?p=preview
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="//code.angularjs.org/1.2.20/angular.js"></script>
<script src="//code.angularjs.org/1.2.20/angular-animate.js"></script>
<script src="script.js"></script>
</head>
<body id="ng-app" ng-app="myApp" ng-controller="myAppCtrl">
Change value
<br><br>
<span><strong>Through directive</strong><small> - animation fires on page load</small></span>
<div value-rotate="myVal" style=""></div>
<br>
<span><strong>Not through directive</strong><small> - animation does no fire on page load</small></span><br>
<span class="value-rotate" ng-switch on="myVal">
<div class="value-rotate__value" ng-switch-when="true">value is {{ myVal }}</div>
<div class="value-rotate__value" ng-switch-when="false">value is {{ myVal }}</div>
</span>
</body>
</html>
script.js
'use strict';
angular.module('myApp', ['valueRotate'])
.controller('myAppCtrl', function($scope) {
$scope.myVal = true;
});
angular.module('valueRotate', ['ngAnimate'])
.directive('valueRotate', function() {
return {
scope: {
value: '=valueRotate'
},
templateUrl: 'value-rotate.html',
link: function (scope, element) {
element.css({ position: 'relative', overflow: 'hidden' });
}
};
});
style.css
.value-rotate {
position: relative;
display: inline-block;
}
.value-rotate__value {
padding: 10px;
}
.value-rotate__value.ng-animate {
-webkit-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s;
transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.value-rotate__value.ng-leave.ng-leave-active,
.value-rotate__value.ng-enter {
top: -50px;
}
.value-rotate__value.ng-leave,
.value-rotate__value.ng-enter.ng-enter-active {
top: 0;
}
value-rotate.html (directive template)
<span class="value-rotate" ng-switch on="value">
<div class="value-rotate__value" ng-switch-when="true">value is {{ value }}</div>
<div class="value-rotate__value" ng-switch-when="false">value is {{ value }}</div>
</span>