I have the following angular sample app:
<html ng-app="theapp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular.js"></script>
</head>
<body>
<div ng-controller="bootstrapper">
<p>This is the bootstrapper</p>
<p><button ng-click="loadtemplate1()">Load Template1</button></p>
<p><button ng-click="testalert()">Test Alert</button></p>
</div>
<script type="text/html" id="template1">
<div ng-controller="template1">
<p>This is template one {{1+5}}</p>
</div>
</script>
<script type="text/javascript">
angular.module('theapp',[])
.controller('bootstrapper',function($scope){
//alert('bootstrapper controller');
$scope.testalert=function(){
alert('call from testalert');
};
$scope.loadtemplate1=function(){
var html=document.getElementById('template1').innerHTML;
document.getElementsByTagName('body')[0].innerHTML=html;
};
})
.controller('template1',function($scope){
alert('template1 controller');
});
</script>
</body>
</html>
All I'm trying to achieve is to dynamically load a controller from some html string which resides in the same page.
However, I need some help, as this current setup doesn't seem to work.
Related
I am using below example and it's not printing the value defined in $event
Below is my app.js
var myModule = angular.module("myModule",[])
myModule.controller("myController",function($scope){
$scope.someName = "test";
})
Below is my html
<html ng-app="myModule">
<head></head>
<body>
<div ng-controller="myController">
This is Angular JS {{ someName }}
</div>
</body>
</html>
There are no issues with your code. Make sure you have refered angularjs reference as below
DEMO
var myModule = angular.module("myModule",[])
myModule.controller("myController",function($scope){
$scope.someName = "test";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myModule">
<head></head>
<body>
<div ng-controller="myController">
This is Angular JS {{ someName }}
</div>
</body>
</html>
I have the following Angular UI Modal:
<script type="text/ng-template" id="dialogBox">
<div class="modal-header">
<p class="modal-title"><b>{{title}}</b></p>
</div>
{{msg}}
<div class="modal-footer">
<button class="btn btn-primary b1" type="submit">OK</button>
</div>
</script>
What I want is to set msg with HTML markup, such as "This is a <b>text</b>". I tried, however the HTML is not rendered (the modal shows the markup). Is this achievable?
You have to use ngHtmlbind. It requires angular-sanitize.js (you have to add ngSanitize to your module dependencies). You also have to declare the html you want to render is safe using $sce.trustAsHtml. For example:
The javascript:
(function(){
'use strict';
angular
.module('myModule', ['ngSanitize']);
angular
.module('myModule')
.controller('showHtmlCtrl', showHtmlCtrl);
showHtmlCtrl.$inject = ['$sce'];
function showHtmlCtrl($sce){
var vm = this;
var html = "<p> Hello world! </p>";
vm.html = $sce.trustAsHtml(html);
}
})();
The view:
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#~1.4.3" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js"></script>
<script data-require="angular-sanitize#1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-sanitize.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myModule" ng-controller="showHtmlCtrl as shc">
<div ng-bind-html="shc.html"></div>
</body>
</html>
you can see it working this plunker
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 use ng-repeat for messages in chat:
ng-bind-html="message.message + getAttachmentTemplate(message.attachment)"
How I can to cut special symbols as JS, HTML and safe from XSS atack?
But I need to display HTML inside getAttachmentTemplate
You need to include angular-sanitize.js, you can then load the ngSanitize module
angular.module('app', ['ngSanitize']);
You can then use the $sanitize service to sanitize your HTML snippets, see an example below:
angular.module('expressionsEscaping', ['ngSanitize'])
.controller('ExpressionsEscapingCtrl', function($scope, $sanitize) {
$scope.msg = 'Hello, <b>World</b>!';
$scope.safeMsg = $sanitize($scope.msg);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.angularjs.org/1.0.2/angular.js"></script>
<script src="http://code.angularjs.org/1.0.2/angular-sanitize.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="expressionsEscaping" ng-controller="ExpressionsEscapingCtrl">
<div class="container">
<h2>Angular $sanitize demo</h2>
<p ng-bind="msg"></p>
<p ng-bind-html-unsafe="msg"></p>
<p ng-bind-html="msg"></p>
<p ng-bind-html-unsafe="safeMsg"></p>
<div>Provided by <a onclick="window.open('stackoverflow.com')">Stack Overflow</a>
</div>
</div>
</body>
</html>
I start with AngularJS. Try create easy app, but dont working.
<div class="col-md-10 editor" ng-controller="Editor">
{{hello}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script src="./js/script.js"></script>
script.js
var app = angular.module('myApp', []);
app.controller('Editor', function($scope) {
$scope.hello = "Hello!";
});
What am I doing wrong?
In console dont have errors.
You have to specify the app in your Html file as well.
Something like:
<body ng-app="myApp">
</body>
https://docs.angularjs.org/api/ng/directive/ngApp
Use this:
<html data-ng-app="myApp">
<head>
</head>
<body>
<div class="col-md-10 editor" ng-controller="Editor">
{{hello}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script src="./js/script.js"></script>
</body>
</html>
maybe, you must first load script.js
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script src="./js/script.js"></script>
<div class="col-md-10 editor" ng-controller="Editor">
{{hello}}
</div>