Html
<script type="text/ng-template" id="ProfileTemplateHTML" >
<div class="container profilepopup-cont" align="center">
<div class="row">
<div class="col-sm-3 zero-margin-padding" align="center">
<img id="DisplayImage" ng-src={{model.picLarge}} class="img-circle">
</div>
...
</script>
In this html template file i have to call a directive.My directive name is 'help'.But if i add to call the directive it is not working.
how to call a directive inside html template in angularjs?
You can add the directive in these ways
As an attribute
<div help>
...
</div>
As a separate tag
<page>
//your code
</page>
I'm not sure i fully understand the question.
here is a jsfiddle to demonstrate how to use custom directive inside ng-template.
or try this..
angular.module('demo', [])
.directive('help', function() {
return {
template: '<div>Help! {{info}}</div>',
scope: {
info: '#info'
}
};
})
.controller('MainCtrl', ['$log',
function($log) {
this.hello = 'This is MainCtrl';
this.template = 'profile-template.html';
//construct
$log.debug('DemoCtrl has been loaded');
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="demo">
<script type="text/ng-template" id="profile-template.html">
<div>this is profile-template.html</div>
<div help info="this is directive info."></div>
</script>
<div ng-controller="MainCtrl as main">
<h2>just a demo</h2>
<div>{{main.hello}}, include template from {{main.template}}</div>
<hr>
<div ng-include src="main.template"></div>
</div>
</body>
Related
Here i am trying to call partial view from controller using angular js.
here is my code
<div ng-repeat='t in tabs'>
<div ng-include='t.templateUrl'></div>
<div>
when i try to include like ng-include="'/home/menutemplate'" it will includes the content. How can i dynamically do this? . Help me
t.templateUrl should be valid scope variable and should hold a string(path for the template):
$scope.t.templateUrl = "/home/menutemplate"
And in your template:
<div ng-include="t.templateUrl"></div>
It's exactly like what you did like this example
angular.module("app", []);
angular.module("app").controller("ctrl", function ($scope, $rootScope, $filter) {
$scope.templates = [
{url: "/Application/Partials/home.html"},
{url: "/Application/Partials/page2.html"}
]
});
<!doctype html>
<html ng-app="app" ng-controller="ctrl">
<head>
</head>
<body>
<div class="container">
<div ng-repeat="temp in templates">
<div ng-include="temp.url"></div>
</div>
<script type="text/ng-template" id="/Application/Partials/home.html">
<h1>home.html is here</h1>
</script>
<script type="text/ng-template" id="/Application/Partials/page2.html">
page 2 is here
</script>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
</body>
</html>
I'm reading through some docs and books about Angular, but I don't really find an angular way of the following problem:
If I have a controller (let's say CardController), and another controller which handles the creation of multiple instances of the CardController. How should I implement the HTML-stuff? I want to be able to instantiate a Card, which has a specific HTML-code (like the one below) and is connected to the CardController.
I don't think that I should pollute the CardController to setup the HTML stuff with ugly .append-stuff. Or is this the way? Should I write an extra service for the HTML representation like CardView or create an extra directive?
If you look at this example, I want to be able to click on "Add another card" and see another instance of a card added below (so basically the ability to have multiple items):
<!DOCTYPE html>
<html ng-app="theApp">
<head>
<script data-require="angular.js#1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-controller="MainController">
<button ng-click="add()">Add another card</button>
</div>
<div id="content">
<div ng-controller="CardController">
<h1>{{ title }}</h1>
<p>{{ message }}</p>
</div>
</div>
<script>
(function() {
var app = angular.module("theApp", []);
app.controller('MainController', function($scope) {
$scope.add = function() {
// Setup HTML for TheController:
// add another DIV/H1/P-etc. to #content,
// just like the one at the beginning.
console.log("Add another card");
};
});
app.controller('CardController', function($scope) {
$scope.title = "A Title";
$scope.message = "Some message";
});
}());
</script>
</body>
</html>
Try this code from my snippet:
(function() {
var app = angular.module("theApp", []);
app.controller('MainController', function($scope) {
var iter = 1;
$scope.cards = [{
id: 1
}];
$scope.add = function() {
$scope.cards.push({
id: ++iter
});
// Setup HTML for TheController:
// add another DIV/H1/P-etc. to #content,
// just like the one at the beginning.
console.log("Add another card");
};
});
app.controller('CardController', function($scope) {
$scope.title = "A Title";
$scope.message = "Some message";
});
}());
<!DOCTYPE html>
<html ng-app="theApp">
<head>
<script data-require="angular.js#1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-controller="MainController">
<div>
<button ng-click="add()">Add another card</button>
</div>
<div id="content">
<div ng-repeat="card in cards" ng-controller="CardController">
<h1>{{ title }}</h1>
<p>{{ message }}</p>
</div>
</div>
</body>
</html>
There is few options. For example you can use angular directives (for me this is the most elegant solution) and create HTML structure like this:
<div ng-controller="MainController">
<button ng-click="add()">Add another card</button>
<div id="content">
<your-card-directive ng-repeat="card in cards" card-data="card"></your-card-directive>
</div>
</div>
or use ng-include to load HTML from your HTML files:
<div ng-controller="MainController">
<button ng-click="add()">Add another card</button>
<div ng-repeat="card in cards" ng-controller="CardController as CardCtrl" ng-include="'../../your-card-template.html'"></div>
</div>
or just use inline HTML:
<div ng-controller="MainController">
<button ng-click="add()">Add another card</button>
<div ng-repeat="card in cards" ng-controller="CardController">
<h1>{{ title }}</h1>
<p>{{ message }}</p>
</div>
</div>
one approach
<div ng-repeat="test in tests>{{test}}</div>
$scope.tests = ["Test Message","Test Message 2"];
$scope.tests.push("new msg");
this vl automatically create a div and ur list grows
or
http://blog.sodhanalibrary.com/2014/08/append-or-prepend-html-to-div-using.html#.Vhz-NxOqqko
I prepared a template as the following
<script type="text/ng-template" id="spinner.html">
<div class="spinner">
<div class="bounce1 spinner-bounce"></div>
<div class="bounce2 spinner-bounce"></div>
<div class="bounce3 spinner-bounce"></div>
<div class="bounce4 spinner-bounce"></div>
<div class="bounce5 spinner-bounce"></div>
</div>
</script>
<!-- a couple of lines below -->
<div spinner> </div>
with the following directive
app.directive('spinner', function ($window) {
return {
restrict: 'A',
templateUrl: '#spinner.html'
};
});
So, directive itself and its template are in the same html, tempateUrl is not loading ng-template I defined above.
What is wrong with this? I tried template too but it didn't work too.
I realize the problem.
It's because I added text/ng-template template in the <head> tag, not <body> tag. In my case, it doesn't find my template and searches for /spinner.html on the server.
I have a simple app in which i have a single input element with a mylist model.
If mylist=1 i ng-include first.html and if mylist=2 i ng-include second.html. So far so good.
My problem is that in each html template i have a button that when clicked i want to change the value of mylist so i can navigate to the other and in order to achieve this i do:
<button ng-click="mylist=x" >switch to x</button>
but ng-click doesn't work. Why?
Here is my code:
scripts.js
var myApp = angular.module('myApp', []);
myApp.controller('MainController', function ($scope) {
$scope.mylist = 1;
});
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://code.angularjs.org/1.2.16/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<input type="number" ng-model="mylist" />{{mylist}}
<br/>
<div ng-switch on="mylist">
<div ng-switch-when=1>
<ng-include src="'first.html'"></ng-include>
</div>
<div ng-switch-when=2>
<ng-include src="'second.html'"></ng-include>
</div>
</div>
</body>
</html>
first.html
<p>first</p>
<button ng-click="mylist=2" >switch to 2</button>
second.html
<p>second</p>
<button ng-click="mylist=1">switch to 1</button>
Also here is the Plunker http://plnkr.co/edit/bVATLV66kN21LC8EPeoW
ng-include creates a child scope. So you should bind to an object property instead of a primitive.
$scope.my = {
list: 1
};
http://plnkr.co/edit/SbeGch5MJdux33HgYsEJ?p=preview
As mentioned in the title, i can't figure out how to render html inside a partial with ng-bind-html.
Here is a plunker to illustrate.
http://plnkr.co/edit/YFfHsahcum7XA8GcH6b2?p=preview
I tried several combinations of ng-bind, ng-bind-html, $sce.trustAsHtml, {{HTMLString}} but none of it worked. Maybe I'm missing something completely different?
Any help is much appreciated! Thank you
Here is a working plunker for Item A.
I only moved the ItemCtrl inside the template for ng-include. I think the main issue was access to the outside scope.
template is now:
Item A:
<div ng-bind-html="trustedContent" ng-controller='ItemCtrl'></div>
Fix: http://plnkr.co/edit/7qd3INmYAmUfJPluwfem?p=preview
<div ng-controller='ItemCtrl'>
<div ng-switch on="item.type">
<div ng-switch-when="A">
<div ng-include='"item_A.html"' ></div>
</div>
<div ng-switch-when="B">
<div ng-include='"item_B.html"'></div>
</div>
</div>
</div>
I have moved the ItemCtrl definition outside the ng-switch and ng-include.
It is not always wise to mix directives with ambiguous priorities together: ng-include was creating a scope which inherited from the parent scope, but the scope of the controller remained separate.
Making the controller's scope the parent scope solved the problem.
Another way:
index.html:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<script data-require="angular.js#1.2.0" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0/angular.min.js"></script>
<script data-require="angular-sanitize#*" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular-sanitize.min.js"></script>
<style>
.ac {
background-color: yellow;
}
.bc {
background-color: orange;
}
</style>
<script>
var app = angular.module('plunker', ['ngSanitize']);
app.controller('MainCtrl', function($scope) {
$scope.items = [{
"type": "A",
"url": "item_A.html",
"content": "<div class=\"ac\">content A</div>"
}, {
"type": "B",
"url": "item_B.html",
"content": "<div class=\"bc\">content B</div>"
}]
});
</script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="item in items">
<div ng-switch on="item.type">
<div ng-switch-when="A">
<div ng-include="item.url"></div>
</div>
<div ng-switch-when="B">
<div ng-include="item.url"></div>
</div>
</div>
</div>
</body>
</html>
item_A.html:
Item A:
<div ng-bind-html="item.content"></div>
item_B.html:
Item B:
<div ng-bind-html="item.content"></div>
Plunker example