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>
Related
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
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.
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 am not able to get the template snippets from template cache (which looks like the following:)
<script id="sub1.html" type="text/ng-template">
<div> sub1 Content</div></script>
I think it is because of line number 11 in index.html file
<div class="hiddenContent" ng-include="'templates.html'">
If I replace this line with the templates.html it works.
How to make this work keeping the line number 11?
Look at my code in Plunkr Code
It works, try moving the template into the index.html
http://plnkr.co/edit/MOwCD8UyRT2IBmaeeAMX?p=preview
<html ng-app="myApp">
<head>
<script data-require="angular.js#1.2.16" data-semver="1.2.16" src="https://code.angularjs.org/1.2.16/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="myCtrl">
<div class="hiddenContent" ng-include="'templates.html'">
</div>
<h1>Hello Plunker!</h1>
{{test}}
<myapp-directive></myapp-directive>
</div>
</body>
</html>
<script id="sub1.html" type="text/ng-template">
<div>sub1 Content</div>
</script>
<script id="sub2.html" type="text/ng-template">
<div>sub2 Content</div>
</script>
Maybe the problem is AngularJS can't find the ng-template in another file. It also work if you define the sub1.html in templateCache:
var app=angular.module("myApp",[]);
app.run(["$templateCache", function ($templateCache) {
$templateCache.put("sub1.html","<div> sub1 Content</div>");
}]);
I can't see the star rating input anywhere. Isn't it loaded? Am I using the directive wrong? Please help.
I have included the ui.bootstrao, JQuery, Bootstrapm and thought the directive should work right out of the box.
When I try to specify ui.bootstrap when defining the ng-app the ng-resource stop working.
var app = angular.module('mainApp', ['ngResource','ui.bootstrap']);
test.html:
<!doctype html>
<html data-ng-app="mainApp">
<head>
<title>Test app/title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
</head>
<body role="document">
<div class="container">
<div class="page-header">
<h1>Test</h1>
</div>
<div ng-controller="PostIndexCtrl">
<div class="row">
<rating value="rate" max="5"></rating>
<div ng-repeat="item in items">
<div class="col-xs-1 col-md-3">
{{item.name}} <img class="thumbnail" src="{{item.photo}}" />
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript"
src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="components/angular-bootstrap/ui-bootstrap.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-resource.min.js"></script>
<script src="js/services.js"></script>
</body>
</html>
service.js:
var app = angular.module('mainApp', ['ngResource']);
app.factory("Post", function($resource) {
return $resource("/api/item");
});
app.controller("PostIndexCtrl", function($scope, Post) {
Post.get(function(data) {
// alert(data.items);
$scope.items = data.items;
});
});
This line in your html seems off to me:
<script src="components/angular-bootstrap/ui-bootstrap.js"></script>
Use:
angular-bootstrap/ui-bootstrap-tpls.js
or
angular-bootstrap/ui-bootstrap-tpls.min.js
instead of simply using:
angular-bootstrap/ui-bootstrap.js
which doesn't contain the templates.
If using bower, then install with:
bower install angular-bootstrap
Depending on your setup (and possibly .bowerrc file) the angular-bootstrap directory will, by default, be put in the directory:
bower_components/angular-bootstrap/ (or perhaps simply components/angular-bootstrap in your config)
where you can find the files mentioned above.