Here’s a brief stand-alone answer, with links to official docs for further info (definition of “services” added for good measure): http://docs.angularjs.org/guide/controller In AngularJS, a controller is a JavaScript constructor function that is used to augment the AngularJS scope. When a controller is attached to the DOM via the ng-controller directive, AngularJS will instantiate a new … Read more
Since CommonModule does not export it as a provider you’ll have to do it yourself. This is not very complicated. 1) Import DatePipe: import { DatePipe } from ‘@angular/common’; 2) Include DatePipe in your module’s providers: NgModule({ providers: [DatePipe] }) export class AppModule { } or component’s providers: @Component({ selector: ‘home’, styleUrls: [‘./home.component.css’], templateUrl: ‘./home.component.html’, … Read more
I just posted this to my brand spanking new blog: http://jasonturim.wordpress.com/2013/09/01/angularjs-drag-and-drop/ Code here: https://github.com/logicbomb/lvlDragDrop Demo here: http://logicbomb.github.io/ng-directives/drag-drop.html Here are the directives these rely on a UUID service which I’ve included below: var module = angular.module(“lvl.directives.dragdrop”, [‘lvl.services’]); module.directive(‘lvlDraggable’, [‘$rootScope’, ‘uuid’, function($rootScope, uuid) { return { restrict: ‘A’, link: function(scope, el, attrs, controller) { console.log(“linking draggable element”); … Read more
If you want to validate email then use input with type=”email” instead of type=”text”. AngularJS has email validation out of the box, so no need to use ng-pattern for this. Here is the example from original documentation: <script> function Ctrl($scope) { $scope.text=”[email protected]”; } </script> <form name=”myForm” ng-controller=”Ctrl”> Email: <input type=”email” name=”input” ng-model=”text” required> <br/> <span … Read more
First a clarification.. I do not recommend overusing $compile, there are better ways for binding event listeners to a scope. I solved this question for me to learn how compilation works and to share it with others. what happens when manipulating template element inside a the compile function? The compilation phase iterates down the DOM … Read more
Yes, you are right – the problem is with cross-domain call. Official docs say: By default, the template URL is restricted to the same domain and protocol as the application document. This is done by calling $sce.getTrustedResourceUrl on it. To load templates from other domains or protocols you may either whitelist them or wrap them … Read more
It depends on the directive attribute in question and the type of binding it uses. Further more it depends on what you intend in the given situation. From your example: ng-repeat=”appModule in applicationModules” No need for the braces as this expression is evaluated by angular inside the ng-repeat directive. id=”{{appModule.Name}}” Here we need braces as … Read more
I did it. See my code below. HTML <div ng:controller=”controller”> <table style=”width:auto;” class=”table table-bordered”> <thead> <tr> <th>Index</th> <th>Count</th> </tr> </thead> <tbody ui:sortable ng:model=”list”> <tr ng:repeat=”item in list” class=”item” style=”cursor: move;”> <td>{{$index}}</td> <td>{{item}}</td> </tr> </tbody>{{list}} <hr> </div> Directive (JS) var myapp = angular.module(‘myapp’, [‘ui’]); myapp.controller(‘controller’, function ($scope) { $scope.list = [“one”, “two”, “thre”, “four”, “five”, “six”]; … Read more
With transclude: true and scope: true, the parent directive creates two new scopes: Scope 004 is a result of scope: true, and scope 005 is a result of transclude: true. Since the child directive does not create a new scope, it uses transcluded scope 005. As you can see from the diagram there is no … Read more
i’ve used the $templateCache to accomplish something similar. i put several ng-templates in a single html file, which i reference using the directive’s templateUrl. that ensures the html is available to the template cache. then i can simply select by id to get the ng-template i want. template.html: <script type=”text/ng-template” id=“foo”> foo </script> <script type=”text/ng-template” … Read more