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.
Related
I am trying to obtain horizontal scroll using buttons.
I have a container which has several elements(which can be more than 3 , getting values from backend) stacked horizontally and I want to scroll through them using the buttons. Also i want to hide those buttons when there is no scrollbar.
This is very easy and usefull:
angular.module('anchorScrollOffsetExample', [])
.run(['$anchorScroll', function($anchorScroll) {
$anchorScroll.yOffset = 50; // always scroll by 50 extra pixels
}])
.controller('headerCtrl', ['$anchorScroll', '$location', '$scope',
function($anchorScroll, $location, $scope) {
$scope.gotoAnchor = function(x) {
var newHash = 'anchor' + x;
if ($location.hash() !== newHash) {
// set the $location.hash to `newHash` and
// $anchorScroll will automatically scroll to it
$location.hash('anchor' + x);
} else {
// call $anchorScroll() explicitly,
// since $location.hash hasn't changed
$anchorScroll();
}
};
}
]);
body {
padding-top: 50px;
}
.anchor {
border: 2px dashed DarkOrchid;
padding: 10px 10px 200px 10px;
}
.fixed-header {
background-color: rgba(0, 0, 0, 0.2);
height: 50px;
position: fixed;
top: 0; left: 0; right: 0;
}
.fixed-header > a {
display: inline-block;
margin: 5px 15px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-anchor-scroll-offset-production</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="anchorScrollOffsetExample">
<div class="fixed-header" ng-controller="headerCtrl">
<a href="" ng-click="gotoAnchor(x)" ng-repeat="x in [1,2,3,4,5]">
Go to anchor {{x}}
</a>
</div>
<div id="anchor{{x}}" class="anchor" ng-repeat="x in [1,2,3,4,5]">
Anchor {{x}} of 5
</div>
</body>
</html>
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 :)
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>
I've done custom directive for frag and drop file upload and put it on a module but it is not working as expected. It is showing error in console and copying that as well.
Could any one tell where i went wrong?
<html>
<head>
<title>Angular Js Page</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<style>
div[dropzone] {
border: 2px dashed #bbb;
border-radius: 5px;
padding: 25px;
text-align: center;
font: 20pt bold;
color: #bbb;
margin-bottom: 20px;
}
</style>
</head>
<body ng-app="Myapp">
<div dropzone>Drop Files Here</div>
<script type="text/javascript">
var app = angular.module("Myapp", ['dropzone']);
app.directive("dropzone", function() {
return {
restrict : "A",
link: function (scope, elem) {
elem.bind('drop', function(evt) {
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files;
for (var i = 0, f; f = files[i]; i++) {
var reader = new FileReader();
reader.readAsArrayBuffer(f);
reader.onload = (function(theFile) {
return function(e) {
var newFile = { name : theFile.name,
type : theFile.type,
size : theFile.size,
lastModifiedDate : theFile.lastModifiedDate
}
scope.addfile(newFile);
};
})(f);
}
});
}
}
});
</script>
</body>
</html>
dropzone is not a different module. You can't inject it to your Myapp module.
it is a directive living inside myApp. You need to read more about angular directives and modules
change
var app = angular.module("Myapp", ['dropzone']);
to
var app = angular.module("Myapp");
it'll probably work
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>