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.
Related
I wish I can handle this, but in the bad way...namely I need to use $cookieStore to check either the function called or not.
Every time to use push array then I need to use $cookieStore. But it seems not practical.
Here was my DOM:
<div ng-controller="MyCtrl">
<div>
<div ng-include="'temp2.html'">
Hello, {{name}}!
</div>
</div>
</div>
<script type="text/ng-template" id="temp2.html">
<div ng-controller="MyCtrl">Another View</div>
</script>
And my angularjs controller:
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.name = 'Superhero';
alert(1);
}
alert(1) function will be called 2 times every times the page was called.
How to avoid this problem without using watcher?
My fiddle for your convenience. Thanks!
The controller would called be twice for both the views, i would suggest you to move controller specific code to init function and use ng-init in one of your views.
var Controller = function($scope) {
$scope.init = function () {
};
};
Your View
<div ng-controller="Controller" ng-init="init()"/>
Yo don't need to specify the Controller name again in the include.... if its the same as the parent one(same as controller of main page).
just go with this
<div ng-controller="MyCtrl">
<div>
<div ng-include="'temp2.html'">
Hello, {{name}}!
</div>
</div>
</div>
<script type="text/ng-template" id="temp2.html">
<div>Another View {{name}}</div>
</script>
Js Fiddel
name will be accessible in the view you included.
Hope it will help you..
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';
}
}
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>
I'm trying to display a div if an object is non-empty. Using this answer, Im trying to use angular.equals to check emptyness, but its not behaving as expected
var test = angular.module('test',[]);
test.controller('testCtrl', ['$scope', function($scope){
$scope.foo={};
$scope.bar="bam"
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test">
<div ng-controller="testCtrl">
<div ng-show="!angular.equals(foo,{})">{{bar}}</div>
</div>
</div>
The expectation here is that the value of bar will only show if foo is not equal to an empty object. However, foo is clearly set to {} and yet bar still shows.
If you want to access the angular object from templates or expressions, you have to make it available on the scope of where you want to use it. In this case you can put it on the testCtrl's scope.
var test = angular.module('test',[]);
test.controller('testCtrl', ['$scope', function($scope){
$scope.angular = angular;
$scope.foo={};
$scope.bar="bam"
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test">
<div ng-controller="testCtrl">
<div ng-show="!angular.equals(foo,{})">{{bar}}</div>
</div>
</div>
I generally put utility objects on $rootScope, so they're available from everywhere.
A cleaner way would be to only add the angular equals method to the $scope:
var test = angular.module('test',[]);
test.controller('testCtrl', ['$scope', function($scope){
$scope.angularEquals = angular.equals;
}
Then you can use the equals method in the template, like:
<div ng-show="!angularEquals(foo,{})">{{bar}}</div>
Your view is looking for a function on the scope, and $scope.angular.equals does not exist. You need to write one like this:
var test = angular.module('test', []);
test.controller('testCtrl', ['$scope',
function($scope) {
$scope.foo = {};
$scope.bar = "bam";
$scope.isEmpty = function(obj) {
return angular.equals(obj,{});
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test">
<div ng-controller="testCtrl">
<div ng-hide="isEmpty(foo)">{{bar}}</div>
</div>
</div>
Angular functions can't be used inline, AFAIK.
You could do the equal check with a function inside the controller instead and return the result.
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  .