What is the correct syntax of ng-include? - javascript

I’m trying to include an HTML snippet inside of an ng-repeat, but I can’t get the include to work. It seems the current syntax of ng-include is different than what it was previously: I see many examples using
<div ng-include src="path/file.html"></div>
But in the official docs, it says to use
<div ng-include="path/file.html"></div>
But then down the page it is shown as
<div ng-include src="path/file.html"></div>
Regardless, I tried
<div ng-include="views/sidepanel.html"></div>
<div ng-include src="views/sidepanel.html"></div>
<ng-include src="views/sidepanel.html"></ng-include>
<ng-include="views/sidepanel.html"></ng-include>
<ng:include src="views/sidepanel.html"></ng:include>
My snippet is not very much code, but it’s got a lot going on; I read in Dynamically load template inside ng-repeat that that could cause a problem, so I replaced the content of sidepanel.html with just the word foo, and still nothing.
I also tried declaring the template directly in the page like this:
<script type="text/ng-template" id="tmpl">
foo
</script>
And running through all the variations of ng-include referencing the script’s id, and still nothing.
My page had a lot more in it, but now I’ve stripped it down to just this:
<!-- index.html -->
<html>
<head>
<!-- angular includes -->
</head>
<body ng-view="views/main.html"> <!-- view is actually set in the router -->
<!-- views/main.html -->
<header>
<h2>Blah</h2>
</header>
<article id="sidepanel">
<section class="panel"> <!-- will have ng-repeat="panel in panels" -->
<div ng-include src="views/sidepanel.html"></div>
</section>
</article>
<!-- index.html -->
</body>
</html>
The header renders, but then my template doesn’t. I get no errors in the console or from Node, and if I click the link in src="views/sidepanel.html" in dev tools, it takes me to my template (and displays foo).

You have to single quote your src string inside of the double quotes:
<div ng-include src="'views/sidepanel.html'"></div>
Source

<ng-include src="'views/sidepanel.html'"></ng-include>
OR
<div ng-include="'views/sidepanel.html'"></div>
OR
<div ng-include src="'views/sidepanel.html'"></div>
Points To Remember:
--> No spaces in src
--> Remember to use single quotation in double quotation for src

For those trouble shooting, it is important to know that ng-include requires the url path to be from the app root directory and not from the same directory where the partial.html lives. (whereas partial.html is the view file that the inline ng-include markup tag can be found).
For example:
Correct:
div ng-include src=" '/views/partials/tabSlides/add-more.html' ">
Incorrect:
div ng-include src=" 'add-more.html' ">

For those who are looking for the shortest possible "item renderer" solution from a partial, so a combo of ng-repeat and ng-include:
<div ng-repeat="item in items" ng-include src="'views/partials/item.html'" />
Actually, if you use it like this for one repeater, it will work, but won't for 2 of them!
Angular (v1.2.16) will freak out for some reason if you have 2 of these one after another, so it is safer to close the div the pre-xhtml way:
<div ng-repeat="item in items" ng-include src="'views/partials/item.html'"></div>

Maybe this will help for beginners
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title></title>
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="custom.css">
</head>
<body>
<div ng-include src="'view/01.html'"></div>
<div ng-include src="'view/02.html'"></div>
<script src="angular.min.js"></script>
</body>
</html>

This worked for me:
ng-include src="'views/templates/drivingskills.html'"
complete div:
<div id="drivivgskills" ng-controller="DrivingSkillsCtrl" ng-view ng-include src="'views/templates/drivingskills.html'" ></div>

try this
<div ng-app="myApp" ng-controller="customersCtrl">
<div ng-include="'myTable.htm'"></div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("customers.php").then(function (response) {
$scope.names = response.data.records;
});
});
</script>

On ng-build, file not found(404) error occur. So we can use below code
<ng-include src="'views/transaction/test.html'"></ng-include>
insted of,
<div ng-include="'views/transaction/test.html'"></div>

Related

Jquery - Selecting a item by ID not working

I'm doing an ionic (angular) app and I have the following simple code at the head of one of my templates:
<script>
$(document).ready(function(){
alert($('#amountID').attr('id'));
});
</script>
</head>
...
<label class="aquitext item item-input" id="amountID">
I used to have the tradicional javascript onclick("blablabla") and it worked to a point but I decided to shift it to jquery and now I'm so stuck I had to remove and simplify it to this point. I've tried multiple permutations of this, including using angular's .element but I keep getting "undefined" on the alert. What am I doing wrong?
(No I don't get any errors on the console)
Edit: It seems it might be related to the fact that I have afterwards an ionic slide-box, thought I have little clue as to how to circumvent it. For now, I removed the slider boxes. Seems to have "fixed" it.
the full structure is, after the script (I trimmed some of the stuff out):
</script>
</head>
<body>
<ion-view>
<ion-content>
<ion-slide-box>
<ion-slide>
</ion-slide>
<ion-slide>
<div class="subtitle">blabla</div>
<form name="newaquisition">
<label class="aquitext item item-input" id="amountID">
<input ng-model='newaquisubmission.amount' type='number' placeholder='aquisition value' required>
</label>
</form>
</ion-slide>
</ion-slide-box>
</ion-view>
</ion-content>
</body>
</html>
Is the label in your HTML or is this part of some template and is added to the DOM by angular?
If you run the JS in the console, does it work? Then it's most likely a timing-problem. $(document).ready seems to be to early.
try $scope.init in your angular-controller
There doesn't seem to be anything wrong with your code; It should work.
Despite that, try creating a variable within the function and then using that variable as the value of alert. For instance,
var x = $('#amountID').attr('id');
alert(x);
If that doesn't work. You probably have an error elsewhere in your code.
Have you referenced a jQuery library (<script src="jquery-2.1.4.min.js"></script>)?
Seem that you don't push the jquery source, this code is correct:
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert($('#amountID').attr('id'));
});
</script>
</head>
<body>
<label class="aquitext item item-input" id="amountID">
</body>
</html>

I can't include another html page in my index.html using Angularjs

I'm following the browser courses of angularjs that you can find here: https://www.angularjs.org/
My main page is "index.html":
<!DOCTYPE html>
<html ng-app="bookStore">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="StoreController as store">
<header>
<h1 class="text-center"> BOOKS OF THE MAGIC LIBRARY </h1>
</header>
<div class="list-group">
<div class="list-group-item" ng-repeat="product in store.products">
<h2>{{product.title}} <em class="pull-right">{{product.price | currency}}</em></h2>
<div class="img-wrap">
<img src="{{product.image}}"/>
</div>
<div ng-include="product-description.html">
</div>
<product-decsription></product-description>
</div>
</div>
</body>
</html>
You can see that I tried two times to include a second page, in the code above, but It didn't work. The code in which I try to include a second page is the following (I have tried to use ng-include and the directive also singularly, but I obtained the same result):
<div ng-include="product-description.html">
</div>
<product-decsription></product-description>
The following is the code of app.js:
(function(){
var app = angular.module('bookStore', []);
app.controller('StoreController', function(){
this.products = books;
});
app.directive('productDescription', function(){
return {
restrict:'E',
templateUrl: 'product-description.html'
}
});
books = [
{
author : "J.K. Rowling",
title: "The prisoner of Azkaban",
description: "the story of an innocent prisoner",
price: 10.50,
image: "hpa.jpg"
},
{
author: "J.K. Rowling",
title: "H.P and the Chamber of Secrets",
description: "the story of a bloody chamber",
price: 8.00,
image: "cos.jpg"
},
{
author: "J.K. Rowling",
title: "H.P and the deathly hollows",
description: "the story fo deathly hollows",
price: 15.00,
image : "dh.jpg"
}
];
})();
The following is the code of "product-description.html":
<h3>Description</h3>
<blockquote>{{product.description}}</blockquote>
I have put all this files (both html ones, both javascript one) in the same folder. Everytime I open the file "index.html" using my browser (google chrome), I can't see the descriptions. The following image shows what I see:
I have tried to put a single quote in ng-include inside the double quote, as suggested by dfsq, but it doesn't work (I still have the same result as in the image above):
<!DOCTYPE html>
<html ng-app="bookStore">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="StoreController as store">
<header>
<h1 class="text-center"> BOOKS OF THE MAGIC LIBRARY </h1>
</header>
<div class="list-group">
<div class="list-group-item" ng-repeat="product in store.products">
<h2>{{product.title}} <em class="pull-right">{{product.price | currency}}</em></h2>
<div class="img-wrap">
<img src="{{product.image}}"/>
</div>
<div ng-include="'product-description.html'"></div>
</div>
</div>
</body>
</html>
I have found those errors in console running the code above:
The problem, as highlighted by comments and replies was that I used "file" as protocol instead of "http" (to do that I should have used a web service). I have installed an IDE which has an integrated web service, so that I have solved the problem. Moroever, there was also another little mistake in the code:
<img src="bla bla"/>
instead of:
<img ng-src="bla bla"/>
I still wait for someone who could tell me why "http-server" didn't work. I will give him the best answer eventually
You need to provide a string path in ngInclude, otherwise it's treated as an expression. Correct code in your case would be (note single quotes in path):
<div ng-include="'product-description.html'"></div>
The problem, as highlighted by comments and replies was that I used "file" as protocol instead of "http" (to do that I should have used a web service). I have installed an IDE which has an integrated web service, so that I have solved the problem. Moroever, there was also another little mistake in the code:
<img src="bla bla"/>
instead of:
<img ng-src="bla bla"/>

Where to add <head> element in angularjs html templates?

I'd like to include a template html with angularjs like:
<div ng-include src="'template/slider.html'"></div>
I will take the template from http://www.jssor.com, which requires also some <head><script>... tags in the template itself:
Question: is it the correct way to create a template with a schema as follows, or should I move the elements somewhere else?
slider.html:
<head>
<script src="jssor.slider.min.js"></script>
<script>
jssor_slider1_starter = function (containerId) {
...
};
</script>
</head>
<div id="slider1_container">
<!-- Slides Container -->
<div ... />
<script>jssor_slider1_starter('slider1_container');</script>
</div>
Your angular templates do not need to have the <head> tag, there should only be one <head> tag in your html page, and it should not be enclosed between the <body> tags. Having multiple <head> tags breaks validation and will cause unpredictable behavior.

Javascript isn't executing when including html-template

Since I started using a html-templatefile for my navbar elements I haven't got one of my scripts to execute(I can execute it via the console). I have experimented with on-load-functions but even that didn't seem to work. My problem is that I understand to little of the execution order and if I'm somehow blocking my script. I don't get any error messages either and when the html-template isn't used (ie - the navbar structure is included with everything else in the same html-file) the page loads as it should. So something there is messing it up. And I can call it from the console as well.
(I have tried a variety of ways but nothing have really worked, other than including the template in the document and that I would like to avoid. This setup is one of many). I hope someone can see the errors I do on the spot. I have cut out som css aswell, for readability.
Edit: Threw js out the window, since ASP was found available. Solved it in about half an hour using asp.
Just place your DOM elements inside body tag. Always render script at the end of the body, and append async javascript files at document ready (or at least this is my view of things).
<html>
<head>
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
<script>
<script src="http://code.jquery.com/jquery.js"></script> // create a local copy of jquery and other async javascript files you can load at $(document).ready(function(){ //here append async scripts like google maps });
<script type="text/javascript" src="d3.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
</script>
Here goes code....
</script>
</body>
</html>
The code you are trying to reference in the $("#pageContainerId").load("navbarTemplate.html"); is outside the body tag and most browsers will cut this out.
Try the following:
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="d3.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
</script>
</head>
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
<script>
Here goes code....
</script>
</body>
</html>
Also as the script is at the top the DOM may not be loaded at the time try the following:
$(document).ready(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
DOM ELEMENT SHOULD INSIDE BODY TAG
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
</body>
Ok, I couldn't get it to work the way I wanted but it turned out we had asp enabled on our server so when I switched to that I got it to work beautiful in about half an hour.
And it's a better way I suspect, in terms of best practice.
Thanks for the responses.

jquery.fullPage.js in joomla template

Hi every one im very new with using javascript and i cant get this jquery.fullpage.js scroll function to work, https://github.com/alvarotrigo/fullPage.js#fullpagejs
and i have no idea how i should install it.
my code:
<html>
<head>
<link href="/mysite/css/jquery.fullPage.css" rel="stylesheet">
<script src="/mysite/js/jquery.fullPage.js">
</head>
<body>
<div class="section active">
MYCONTENT
</div>
<div class="section">
MYCONTENT
</div>
</body>
</html>
I have been trixing with this for a few hours and its easy
This is my joomla template! (example)
<head>
//here you put the code that gets the source files for fullpage.js which you find on the github link//
</head>
<body>
//here is your body and it probably have tons of <div> elements in it, in different levels like this:
<div>
<div>
<div>
//here you can for example find a line of php that renders a module.
</div>
</div>
</div>
The thing i did wrong when i tried to implement fullpage.js to my joomla site was that i where putting the section class to a div that was not in level 2 after the body tag
What i want to explain with that is:
<body>
<div id="fullpag <<-this is where fullpage starts">
<div class="section" >
YOUR CONTENT
</div>
</div>
The div with the id fullpage should always start in the first level and the section always in the second level after the body tag, i have no real name for what i call levels but i hope everyone understands.

Categories