Just a good solid read:
How to dynamically load template for a directive in AngularJS
If you want to dynamically load a template for a directive in AngularJS, just follow the steps found at: https://medium.com/angularjs-meetup-south-london/angular-directives-using-a-dynamic-template-c3fb16d03c6d
Something like:
HTML
JavaScript
How to validate an entered text to a min date in a kendo datepicker in AngularJS.
The code and live preview can be found here:
http://plnkr.co/edit/jdnRjO?p=preview
When no date is entered a “pink” border will be shown:
When a date is entered that’s before the “min” date a “pink” border will be shown:
When a date on or after the min date is entered, no border will be shown:
Using a custom AngularJS validation directive to validate an entered text in a kendo combo box.
See the plunker for the code: http://plnkr.co/edit/WroQIwLj4K8vUlVOCkDx?p=preview
When no text is entered, the kendo combo box should be invalid:
When a text is entered, that does not match a valid entry, the kendo combo box should be invalid:
When a text is entered, that does match a valid entry, the kendo combo box should be valid and the selected person should be shown:
A little AngularJS directive for setting focus on model change.
I created a simple plunker based on http://www.emberex.com/programmatically-setting-focus-angularjs-way/
When the user clicks on the button the textarea gets focused.
Here is the code:
How to show html embeded inside JSON to the user with AngularJS and ngSanitize.
I want to show HTML to the user, that was stored in a SQL Server Database. The data was queried from the SQL Server Database by using Entity Framework, then the C# model was converted to JSON, by using JSON.net and send to the browser by the ASP .NET web api service.
To show this HTML to the user with AngularJS, I used ngSanitize and the ng-bind-html directive:
(at this moment plunker is down, so I will edit this post in the future to add a plunker).
If the HTML contains angular bindings / directives, you can use the compile service to bind the scope to the html fragment:
https://docs.angularjs.org/api/ng/service/$compile
So instead of using the ng-bind-html, you can use this directive:
https://github.com/incuna/angular-bind-html-compile/blob/master/angular-bind-html-compile.js
<!DOCTYPE html> <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="spike"> <head> <!-- Why is angular added to the html tag? Because IE8 won't work without it. --> <title>Spike page</title> <meta charset="utf-8"> <!-- Why is "edge" used? Because we want the highest support for modern standards. --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Library scripts --> <!--<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>--> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-sanitize.min.js"></script> <!-- Live reload script with grunt. --> <!--<script src="http://localhost:35729/livereload.js"></script>--> <!-- App styles --> <style> /* A small custom reset stylesheet is used, to fix style differences between browsers. */ html, body { height: 100%; } body, div, p, ul, li, button { border: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-family: "Open Sans", sans-serif; margin: 0; outline: 0; padding: 0; } body { background-color: #F1F1F1; padding: 20px; } .spike-title { color: #393939; } .spike-content { color: #393939; } .spike-content-with-class { color: #ff0000; } </style> <!-- App scripts --> <script> (function () { "use strict"; var app = angular.module("spike", ["ngAnimate", "ngSanitize"]); }()); (function () { "use strict"; var app = angular.module("spike"); var controller = function ($scope) { $scope.title = "How to show html embeded inside JSON to the user with AngularJS and ngSanitize."; var json = '{ \"html\":\"<br><br><p>Some html in JSON.</p><br><br><p class=\"spike-content-with-class\">Some html in JSON with a class attribute.</p>\" }'; var content = JSON.parse(json); $scope.content = content.html; }; app.controller("main", ["$scope", controller]); }()); </script> </head> <body> <div ng-controller="main"> <h2 class="spike-title">{{ title }}</h2> <div class="spike-content" ng-bind-html="content"></div> </div> </body> </html>
Dynamic loading of views as directives in an AngularJS wizard.
Demo and Code can be found at: http://plnkr.co/edit/Ht4ud6kyJUzDTQdS9MI2?p=preview
Just for the fun, I added a D3.js chart:
A simple AngularJS wizard that dynamically loads pages (views).
In the plunker each page is a *.html file that is loaded by dynamically setting a viewmodel property “pageTemplateUrl”:
ng-include="pageTemplateUrl"
Each *.html file contains a “page” directive.
In this examples all pages share one “page” directive, so all logic for all pages is stored in the “page” directive, but you can put in, any custom made directive in the “*.html” file, so you can give each page it’s own directive / logic.
Index.html
<body> <div ng-controller="main"> <h2 class="main-title">{{ title }}</h2> <wizard></wizard> </div> </body>
Wizard.html
<div class="wizard"> <div>Wizard</div> <div class="page page-slide-in" ng-include="pageTemplateUrl"></div> <div class="footer flex-horizontal"> <div class="wizard-footer-left"> <button ng-disabled="prevShouldBeDisabled()" ng-click="prev()"> Back </button> </div> <div class="wizard-footer-middle flex-vertical"> <ul class="steps"> <li ng-repeat="page in pages" ng-class="{ active: isActive(page), complete: isCompleted(page) }" ng-click="setPageTemplateUrl(page)"> <span class="badge">{{ $index + 1 }}</span> {{ page.title }} <span class="chevron"></span> </li> </ul> </div> <div class="wizard-footer-right"> <button ng-disabled="nextShouldBeDisabled()" ng-click="next()"> Next </button> </div> </div> </div>
Intro.html (first page in wizard)
<page> <div class="page-title">{{ title }}</div> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu,
consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.
Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. </p> </page>
JavaScript
(function () { "use strict"; var app = angular.module("spike", ["ngAnimate"]); }()); (function () { "use strict"; var app = angular.module("spike"); var controller = function ($scope) { console.log("Controller [main] loaded."); $scope.title = "Dynamic loading of views as directives in a AngularJS wizard."; }; app.controller("main", ["$scope", controller]); }()); (function () { "use strict"; var directive = function () { function link($scope, element, attributes, controller) { function initialize() { showPage(0); } function showPage(pageId) { $scope.selectedPageId = pageId; var page = $scope.pages[$scope.selectedPageId]; $scope.setPageTemplateUrl(page); } $scope.chartData = [10, 20, 30, 40, 60, 80, 20, 50]; $scope.pages = [ { title: "intro" }, { title: "modules" }, { title: "detail" }, { title: "order" } ]; $scope.isActive = function (page) { var selectedPage = $scope.pages[$scope.selectedPageId]; return (selectedPage.title === page.title); }; $scope.isCompleted = function (page) { var index = $scope.pages.indexOf(page); return (index < $scope.selectedPageId); }; $scope.next = function () { showPage($scope.selectedPageId + 1); }; $scope.prev = function () { showPage($scope.selectedPageId - 1); }; $scope.nextShouldBeDisabled = function () { return ($scope.selectedPageId >= $scope.pages.length - 1); }; $scope.prevShouldBeDisabled = function () { return ($scope.selectedPageId <= 0); }; $scope.setPageTemplateUrl = function (page) { $scope.selectedPageId = $scope.pages.indexOf(page); $scope.pageTemplateUrl = page.title + ".html"; }; initialize(); console.log("Directive [wizard] loaded."); } return { restrict: "EA", link: link, templateUrl: "wizard.html" }; }; angular.module("spike").directive("wizard", [directive]); }()); (function () { "use strict"; var directive = function () { function link($scope, element, attributes, controller) { var page = $scope.pages[$scope.selectedPageId]; $scope.title = page.title; console.log("Directive [page].[" + page.title + "] loaded."); } return { restrict: "EA", link: link }; }; angular.module("spike").directive("page", [directive]); }()); (function () { "use strict"; var directive = function () { function link($scope, element, attributes, controller) { var chart = d3.select(element[0]); chart.append("div").attr("class", "chart") .selectAll('div') .data($scope.data).enter().append("div") .transition().ease("elastic") .style("width", function (d) { return d + "%"; }) .text(function (d) { return d + "%"; }); console.log("Directive [barsChart] loaded."); } return { restrict: "EA", replace: false, scope: {data: '=chartData'}, link: link }; }; angular.module("spike").directive("barsChart", [directive]); }());
AngularJS tip, quote your css classnames in ng-class
It is a common practice to use spinalcase in CSS, like the css class “.ada-wizard-marker”.
If you want to use this class in a ng-class directive, where the input is an object, use single quotes, like:
ng-class="{ 'ada-wizard-marker': vm.showToolTip }"
If you don’t use the single quotes, ng-class will not work.
Using css animation with angular, to show and hide a massive angular tooltip in a responsive layout.
Code can be found at:
http://plnkr.co/edit/xarxPAKTXrEIDKUHmapg?p=preview
I was asked to show a tooltip with AngularJS in a responsive layout, so I created a Plunker, that will form the base of my code.
Note: resize the screen to test the responsiveness.
Initial state
Clicked on Tile 3
HTML
<body> <div ng-controller="main"> <br> {{ title }} <br> Just click on one of the tiles to show the tooltip. <br> <br> <div class="header"> Modules </div> <div class="tiles"> <div class="tile" ng-class="{ marker: tile.showToolTip }" ng-click="onTileClick(tile)" ng-repeat-start="tile in tiles"> {{ tile.title }} </div> <div class="wizard fadeSlideIn" ng-show="tile.showToolTip" ng-repeat-end> <div class="close">X</div> <div>{{ tile.title }}</div> <div style="clear: both"></div> </div> </div> </div> </body>
Setting height / width sparklines and removing spacing with Kendo UI and AngularJS
In the following screendump, I used 6 sparkline fields:
To increase the width / height of the sparkline (bar) I set the following values:
– charArea options (height, padding, margin)
– Series options (gap and spacing)
$scope.kostenMinderPersoneelChartOptions = { chartArea: { background: "", height: 17, margin: { top: 1, bottom: 0, left: 0, right: 0 }, padding: 0 }, tooltip: { visible: false }, series: [ { type: 'bar', color: '#EC008C', field: 'sparkline', gap: 0, spacing: 0 } ], valueAxis: { min: 0, max: 200000 } };