I can't seem to get the following code to work:
<script>alert(topic);</script> <!-- Outputs: "dynamics" -->
<div ng-include="'content/' + topic + '.html'"></div> <!-- Does not work. -->
I have deduced the variable is the problem as the following code does work:
<div ng-include="'content/' + 'dynamics' + '.html'"></div> <!-- Works. -->
Does anybody know how I can do this?
Update:
Following Steffen's link, I have written the following code, but still no luck:
<script>
alert(topic); // Outputs "dynamics"
var app = angular.module('myapp', []);
app.controller('MainCtrl', ['$scope', '$window', function ($scope, $window) {
$scope.topic = $window.topic;
}]);
</script>
<div ng-app="myapp" ng-controller="MainCtrl" ng-include="'content/' +
topic + '.html'"></div> <!-- Does not work. -->
Thanks.
Based on Steffen's jsfiddle, here is how I passed a JavaScript variable to AngularJS and used it in defining a directory:
<script>
// Create module.
var app = angular.module('app', []);
// Add controller to module.
app.controller('MainCtrl', ['$scope', '$window', function ($scope, $window) {
$scope.topic = $window.topic;
console.log($scope.topic);
}]);
</script>
<div ng-app="app" ng-controller="MainCtrl" ng-include="'content/' +
topic + '.html'"></div> <!-- Works! -->
Many thanks to all for their answers. :)
try this :
<div ng-include="'content/{{topic}}.html'"></div>
In angularjs , scope variable are access in HTML using The double curly brace notation {{ }} .
Try as follows:
<ng-include src="topic"> </ng-include>
Make sure you have define $scope.topic = "whateveryouwant";
-----------OR-----------
You could do it like:
<ng-include src="getTopic()"></ng-include>
Controller:
function AppCtrl ($scope) {
$scope.getTopic= function () {
return 'partials/whatever.html';
}
}
Related
I'm using AngularJS for binding JS variables to my HTML content, and it works fine.
JS
var app = angular.module("Tabs", [])
.controller("TabsController", ['$scope', function($scope){
$scope.events = my_JS_object;
})
HTML
<div>{{events.test}}</div>
It works as long as my_JS_object.test is a simple string, like "Hello World", but once I try to put HTML tag in there, such as Hello <b>World</b> It doesn't use the tags as HTML elements, but as simple text. Which makes sense, only I have no idea how to make the HTML tags work.
As stated by Angular documentation, you can use inbuilt ng-bind-html directive to evaluate model string and insert resulting HTML into element.
Example:
If you have model value like:
$scope.myHTML =
'I am an <code>HTML</code>string with ' +
'links! and other <em>stuff</em>';
Use ng-bind-html like:
<p ng-bind-html="myHTML"></p>
For detailed information go through: https://docs.angularjs.org/api/ng/directive/ngBindHtml
Note: Don't forget to inject ngSanitize service in your app.
You need to use the ngBindHtml directive that properly evaluates the expression and inserts the resulting HTML into the element in a secure way. To do this, you must include a reference to angular-sanitize.js in your HTML and then in your angular module, inject ngSanitize.
Like so
var app = angular.module("Tabs", ['ngSanitize'])
.controller("TabsController", ['$scope', function($scope){
$scope.events = my_JS_object;
})
<div ng-controller="TabsController">
<div ng-bind-html="events.test"></div>
</div>
Here is a full working example:
(function(angular) {
'use strict';
angular.module('bindHtmlExample', ['ngSanitize'])
.controller('ExampleController', ['$scope', function($scope) {
$scope.myHTML = 'Hello This is <b>BOLD<b/>';
}]);
})(window.angular);
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular-sanitize.js"></script>
</head>
<body ng-app="bindHtmlExample">
<div ng-controller="ExampleController">
<p ng-bind-html="myHTML"></p>
</div>
</body>
Refer to the official angular documentation for details:
https://docs.angularjs.org/api/ng/directive/ngBindHtml
If you want to insert HTML into page you shouldn't do it this way.
There is sanitize for this task.
For example in your controller:
$scope.trustedHtml = "<b>Hello World</b>"
And in your html:
<div ng-bind-html="trustedHtml "></div>
Always check html if using a user given text before inserting.
Also don't forget to add ngSanitize as dependency while creating controller
It's easier to use transclusion if you want to embed custom HTML into your DOM tree.
angular.module('myApp', [])
.controller('MainCtrl', function ($scope) {
$scope.overwrite = false;
$scope.origin = 'parent controller';
})
.directive('myDirective', function() {
return {
restrict: 'E',
templateUrl: 'my-directive.html',
scope: {},
transclude: true,
link: function (scope) {
scope.overwrite = !!scope.origin;
scope.origin = 'link function';
}
};
});
<script src="https://code.angularjs.org/1.3.2/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MainCtrl">
<my-directive>
<p>HTML template</p>
<p>Scope from {{origin}}</p>
<p>Overwritten? {{overwrite}}</p>
</my-directive>
</div>
<script type="text/ng-template" id="my-directive.html">
<ng-transclude></ng-transclude>
<hr />
<p>Directive template</p>
<p>Scope from {{origin}}</p>
<p>Overwritten? {{overwrite}}</p>
</script>
</div>
HTML
<section ng-app="app">
<table ng-controller="VoicemailsCtrl">
<caption>{{test}}</caption>
</table>
</section>
JS
var app = angular.module('app', [])
.controller('VoicemailsCtrl', ['$scope', VoicemailsCtrl]);
function VoicemailsCtrl($scope, $http)
{
$scope.vms = [1,2,3];
$scope.test = 'this is a test';
}
Can be seen at:
http://jsfiddle.net/tx9nbo8g/6/
You missed adding
ng-app="app"
in the section.
Check the updated fiddle
Fiddle
Apart from this you need to add
angular 1.2.1
and
No wrap in head
in framework and extension.
.
Please find below working code :
Html:
<body ng-app="app">
<section>
<table ng-controller="VoicemailsCtrl">
<caption>{{test}}</caption>
</table>
</section>
</body>
Js:
var app = angular.module('app', []);
app.controller('VoicemailsCtrl', ['$scope','$http',VoicemailsCtrl]); //You forgot to add $http
function VoicemailsCtrl($scope, $http) {
$scope.vms = [1,2,3];
$scope.test = 'this is a test';
}
http://plnkr.co/edit/qCsG4WzFc0Irt2RobLoC?p=preview
Add ng-app="app" on section element & also you need to change the script loading option inside your fiddle from OnLoad to No Wrap in <head/>
Markup
<section ng-app="app">
<table ng-controller="VoicemailsCtrl">
<caption>{{test}}</caption>
</table>
</section>
Working Fiddle
Your HTML should have to be changed. You need to tell angular where app is starting. Default ng-app is also a valid app declaration.
<section ng-app="MyApp">
<table ng-controller="VoicemailsCtrl">
<caption>{{test}}</caption>
</table>
</section>
In controller
angular.module('MyApp', [])
.controller('VoicemailsCtrl', ['$scope', function ($scope){
$scope.vms = [1,2,3];
$scope.test = 'this is a test';
}]);
fiddle
You should not use global declaration of controller. Its been deprecated in angular 1.3+ versions. You should use controller directive to declare a controller.
I have the need to add in some items from my scope into some inline script I need to run on my site.
From what I have tried in my demo it doesn't look possible to use the values from my scope in inline script tags. What is the best way to achieve this?
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script>
<div ng-app="app">
<div ng-controller="MainCtrl">
'{{aaa}}'
<script>console.log('{{aaa}}');</script>
</div>
</div>
<script>
'use strict';
var app = angular.module('app', []);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.aaa = 'bbb';
}]);
</script>
Console returns '{{aaa}}'. I want it to return bbb.
<div id="idd" ng-controller="MainCtrl">
'{{aaa}}'
<button ng-click="$log.log(aaa)">log</button>
</div>
</div>
<script>
'use strict';
var app = angular.module('app', []);
app.controller('MainCtrl', ['$scope','$log',
function($scope, $log) {
$scope.aaa = 'bbb';
$scope.$log = $log;
//console.log($scope.aaa);
//console.log($scope.$parent);
}
]);
</script>
<div ng-app="myapp" ng-controller="hello">
<script>
function Hello($scope, $http) {
$http.get('http://rest-service.guides.spring.io/greeting').
success(function(data) {
$scope.greeting = data;
});
}
</script>
and I would like to print the content like this {{greeting.id}}.
the code snippet is going to get data in JSON format from "http://rest-service.guides.spring.io/greeting" using angularjs. This isn't working in eclipse. Any ideas to make it work ?
I'm fairly certain that the value of ng-controller is case sensitive.
So, this:
ng-controller="hello"
will look for a function with the name: hello, not Hello.
Here is a plunker demonstrating the issue.
Change your controller code like this.
(function () {
var myApp = angular.module('myModule');
myApp.controller('hello', ['$scope', '$http', function ($scope, $http) {
$http.get("http://rest-service.guides.spring.io/greeting").then(function(data){
$scope.greeting=data;
});
}]);
})();
and in the html
{{greeting.data.id}}
I checked it in plunker. It is working fine
How can I display as space not as string. Is there raw filter like in twig?
<div>{{item}}</div>
$scope.item = ' ';
But the result is escaped . I need this because ' ' have height of 0.
It can be easily done by using ngBindHtml
For Angular above 1.2.x version:
use ng-bind-html
Working Demo
html
<div ng-app='myApp' ng-controller="Controller">
<div ng-bind-html="item"></div>
</div>
script
var app = angular.module('myApp', ['ngSanitize']);
app.controller('Controller', function ($scope, $sce) {
$scope.item = 'What Is Your Name?';
});
For Angular 1.0.x version:
Working Demo
use ng-bind-html-unsafe
html
<div ng-app='myApp' ng-controller="Controller">
<div ng-bind-html-unsafe="item"></div>
</div>
script
var app = angular.module('myApp', []);
app.controller('Controller', function ($scope) {
$scope.item = 'What Is Your Name?';
});
For Angular 1.3.x version:
Use the $sce service to mark the string as safe to use in a specific context (HTML in this case).
See the documentation here
HTML code:
<div ng-app='myApp' ng-controller="Controller">
<div ng-bind-html="item"></div>
</div>
JS code (controller):
var app = angular.module('myApp', []);
app.controller('Controller', function ($scope, $sce) {
$scope.item = $sce.trustAsHtml('<span>Some HTML code</span>');
});
Try using ngBindHtml
<div data-ng-bind-html="item"></div>
You can also create a filter for that.
Filter
app.filter("trustHtmlContent", ['$sce', $sce => htmlCode => $sce.trustAsHtml(htmlCode)]);
usage
<ANY ng-bind-html="value | trustHtmlContent"></ANY>
src: How do you use $sce.trustAsHtml(string) to replicate ng-bind-html-unsafe in Angular 1.2+
You can use the ascii code for   in a string.
Alt-255.
This will correctly render as an  .