I am attempting to implement the Kendo UI Editor with Angular, per the example on their demos website. So far it works pretty well;
kendo ui demos
This is what I have so far, but the problem I am having is actually rendering a fully parsed preview of the contents of the editor. When I use ng-bind-html, it works when the page first loads, but then any subsequent edits have HTML peppered into it. I thought the answer would be to use kendo.htmlEncode, but that isn't working either. I'm not quite getting the hang of this like I thought I would...
I have prepared a jsBin to show what is going wrong, as well as posted my code here for review.
jsBin
app.js
(function(){
var app = angular.module("kendoDemos", [ 'kendo.directives', 'ngSanitize' ]);
app.controller('EditorController', function($scope, $sce){
$scope.html = "<h1>Kendo Editor</h1>\n\n" +
"<p>Note that 'change' is triggered when the editor loses focus.\n" +
"<br /> That's when the Angular scope gets updated.</p>";
});
app.directive('kendoHtml', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
return element.html(kendo.htmlEncode(scope[attrs.kendoHtml]));
}
};
});
})();
html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/kendo.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular.sanitize.js"></script>
<script type="text/javascript" src="js/kendo.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div ng-app="kendoDemos">
<div ng-controller="EditorController" class="container">
<h2>Kendo Editor</h2>
<textarea kendo-editor ng-model="html"></textarea>
<h3>Kendo Editor Preview</h3>
<blockquote kendo-html="html"></blockquote>
</div>
</div>
</body>
</html>
You need to do two things:
Prevent the editor from encoding its value.
<textarea kendo-editor ng-model="html" k-encoded="false"></textarea>
Avoid using kendo.htmlEncode because it will encode it one more time.
scope.$watch(attrs.kendoHtml, function() {
element.html(scope[attrs.kendoHtml]);
});
Here is the updated jsbin: http://jsbin.com/bibecima/1/edit
You can also use ng-bind-html to avoid the need of a custom directive: http://jsbin.com/kamenoju/1/edit. It will work as expected once you set the encoded option to false.
Related
Newbie to AngularJS. Trying to display a message from controller onto the html page but it does not show. I'm using AngularJS version 1.6.0 and I binded the controller to the body tag. What am I missing?
/// HTML
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#*" data-semver="4.0.0"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js">
</script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{message}}</h1>
</body>
</html>
// script.js file contents
var app = angular.module('app', []);
app.MainController('MainController', function($scope) {
$scope.message = "Hello, Angular!";
});
Thank you.
Since you are using the version 1.6 , declaration of global controller is not supported, you need to have a module as well.
DEMO
var app = angular.module('testApp',[])
app.controller('MainController',function($scope) {
$scope.message = "Hello, Angular!";
});
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script data-require="angular.js#*" data-semver="4.0.0"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js">
</script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{message}}</h1>
</body>
</html>
do you need to pass the name of your app on the ng-app tag.
Like this:
<html ng-app="your-app">
So Angular understand where it comes.
So, an advice to you is using the controllerAs syntax over the classic controller with $scope syntax.
Like this:
JS file:
var app = angular.module('testApp',[])
app.controller('MainController',function($scope) {
var vm = this; // view model
vm.message = "Hello, Angular!";
});
HTML file:
<body ng-controller="MainController as mainCtrl">
<!-- or any other name, your choice -->
<h1>{{mainCtrl.message}}</h1>
</body>
Why?: Controllers are constructed, "newed" up, and provide a single
new instance, and the controllerAs syntax is closer to that of a
JavaScript constructor than the classic $scope syntax.
Why?: It promotes the use of binding to a "dotted" object in the View
(e.g. customer.name instead of name), which is more contextual, easier
to read, and avoids any reference issues that may occur without
"dotting".
Why?: Helps avoid using $parent calls in Views with nested controllers
https://github.com/johnpapa/angular-styleguide/tree/master/a1#controlleras-view-syntax
I hope this helps you
I'm trying to build a table as in this JSFiddle which I found here.
I notice lots of elements have a collapse="<boolean>" property and as long as the property is true, you will get a nice collapse animation. I tried finding documentation about the collapse attribute online as well and didn't find anything. However, I also noticed the version of angular is rather outdated (1.0.5 instead of 1.5 that I'm currently using). If I try to replace the reference to angular 1.5, the jsfiddle example also stops working. My question is, assuming collapse is deprecated, how can I reproduce this effect in angular 1.5?
The collapse/uib-collapse directive belongs to the angular-ui-bootstrap library, the documentation can be found here:
https://angular-ui.github.io/bootstrap/#/collapse
There is nothing wrong with the directive when running under Angular 1.5.0:
angular.module('App', [
'ngAnimate',
'ui.bootstrap'
]);
angular.module('App').controller('Controller', [
'$scope',
function ($scope) {
$scope.isCollapsed = false;
}
]);
<!DOCTYPE html>
<html ng-app="App">
<head>
<meta charset="utf-8" />
<title>Angular 1.5.0</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
<script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-animate.js"></script>
<script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script>
<script type="application/javascript" src="app.js"></script>
</head>
<body ng-controller="Controller">
<button type="button" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
<hr>
<div uib-collapse="isCollapsed">
<div class="well well-lg">
Some content
</div>
</div>
</body>
</html>
I am learning angular.. I tried to run a small example,but wasn't able to render correct output.Can anybody help?
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
</head>
<body ng-app='app' ng-controller='MainController as main'>
<div class='container'>
<h1>{{ title }}</h1>
<div ng-controller='SubController as sub'>
<h2>{{sub.title}}</h2>
<p>If we were not using the <strong>ControllerAs</strong> syntax we would have a problem using title twice!</p>
</div>
</div>
</body>
</body>
</html>
app.js
angular.module('app', []);
angular.module('app').controller("MainController", function($scope){
$scope.title = 'AngularJS Nested Controller Example';
});
angular.module('app').controller("SubController", function(){
this.title = 'Sub-heading';
});
I am not able to figure out why angular variables are getting displayed as normal text instead of its assigned value. kindly help...
It looks like you are missing a link to your app.js file.
Just a tip when referencing your .js files, make sure you reference any javascript which uses Angular AFTER the line where you reference angular.js
So your references should look something like this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="app.js"></script> <!-- this is the one you are missing -->
Please, plunkr
It works
<h1>{{main.title }}</h1>
<div ng-controller='SubController as sub'>
<h2>{{sub.title}}</h2>
<p>If we were not using the <strong>ControllerAs</strong> syntax we would have a problem using title twice!</p>
</div>
I downloaded the seed project from git. Basically, changed the code in following three files -
app.js
angular.module('app', []);
index.html
<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
</head>
<body ng-controller="MessageController">
<div class="container">
<h1>{{title}}</h1>
</div>
</body>
</html>
MessageController.js
angular.module('app').controller("MessageController",function(){
alert("inside message controller");
var vm = this;
vm.title = 'AngularJS Tutorial Example';
});
When I run http://localhost:8000/app/index.html, it displays {{title}} and not the value inside controller.
I am new bie in angular and trying to learn but unable to figure out whats wrong here.
You appear to have two different things happening.
First you appear to have missed adding your javascript dependencies to your html file.
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="app.js"></script>
<script src="MessageController.js"></script>
</head>
An additional note
Because you are using multiple files (which is fine), make sure you include the app.js file before the MyController.js file.
You also need to correctly access the scope. Even if you add the javascript dependencies you will get a blank page if not bound correctly.
Because you are using var vm = this; format you need to be sure to use the control as annotation
<body ng-controller="MessageController as myctrl">
<div class="container">
<h1>{{myctrl.title}}</h1>
</div>
</body>
Working Plunker Example
Another options is to directly extend $scope in your controller. You could then just have {{title}} on your page and it should bind correctly.
angular.module('app').controller("MessageController",['$scope',function($scope){
alert("inside message controller");
$scope.title = 'AngularJS Tutorial Example';
}]);
var yourapp = angular.module('app', []);
yourapp .controller('MessageController', function ($scope) {
alert("inside message controller");
$scope.title = 'AngularJS Tutorial Example';
});
I was just testing out angular and am wonder why nothing is showing up when I load up the page. I installed AngularJS through Package install already. Is there something wrong here?
HTML
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="Journal.css">
<title>Henry's journal</title>
</head>
<body>
<div ng-app="journal">
<div header></div>
</div>
<div>
<script type="text/javascript" src="Journal.js"></script>
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script type ="text/javascript"
src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js">
</script>
</body>
</html>
JAVASCRIPT
var journal = angular.module("journal", []);
journal.directive("header", function(){
return{
restrict: 'A',
link: function(){
alert("I'm working");
},
template: "<div>Hello!</div>"
};
});
You need to load AngularJS and jQuery before running your own script. Like so:
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type ="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"> </script>
<script type="text/javascript" src="Journal.js"></script>
(Additionally, you might be running into a different issue if you are testing locally using the file:// protocol. I'm not sure, but just in case: you'll have to specify a HTTP[s] protocol to load AngularJS: http://ajax.googleapis.com... instead of //ajax.googleapis.com...)
you have to add ng-app in the first HTML tag.
<html ng-app>
<!-- ...head...body -->
</html>
Perhaps this is an easier version of your app:
<html ng-app="journal">
<script type ="text/javascript"
src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js">
</script>
<title>jojo</title>
<div ng-controller="hola">
</div>
<script>
angular.module("journal", [])
.controller("hola", function($scope){
alert('HOLEAAA!');
})
</script>
</html>
Thanks.