How to manipulate styles of directive in AngularJS?
This should do the trick. var MyApp = angular.module(‘MyApp’, []); MyApp.directive(‘myTag’, function() { return { link: function(scope, element, attributes){ element.addClass(‘MyClass’); } } });
angularjs-directive
ngIf and ngSwitch AngularJS
ngIf is basically a version of ngSwitch with a single condition. It’s different from ngShow in that it removes the actual DOM element rather than simply hiding it. If you’re using an ngSwitch with just a singly truthy condition check, then I believe ngIf will do the same thing.
AngularJS – Dynamically creating elements that specify directives
See $compile. You can use this service similarly to this: var newDirective = angular.element(‘<div d2></div>’); element.append(newDirective); $compile(newDirective)($scope); This will perform the compilation and linking of your new element, and set d2 into action. However you may find it simpler and more angular if you can somehow rewrite your original directive in terms of other built … Read more
How to replace an element in AngularJS directive linking function?
Mark’s answer will work, however, that example is too limited to show the whole picture. Whereas Mark’s directive might indeed suffice for common and simple UI components, for more complex operations, that pattern is one to be avoided. Below I explain in detail the reason behind this. In fact, Angular already provides a far simpler … Read more
AngularJS equivalent for Angular ng-container
In cases you have mentioned, you can use ng-repeat-start and ng-repeat-end pair, respectively: Tables with interlaced pairs, triples etc. of cells: <table><tr> <td ng-repeat-start=”item in items”>{{ item.a }}</td> <td ng-repeat-end>{{ item.b }}</td> </tr></table> HTML lists: <dl> <dt ng-repeat-start=”item in items”>{{ item.term }}</dt> <dd ng-repeat-end>{{ item.definition }}</dd> </dl> Table-like arrangement of data with display:grid: <div style=”display: … Read more
Loading relative templateUrl
The best way to do this now is using a module loader like browserify, webpack, or typescript. There are plenty of others as well. Since requires can be made from the relative location of the file, and the added bonus of being able to import templates via transforms or loaders like partialify, you don’t even … Read more
Passing variable to Angular Directive
Try <my-dir myindex=”$index”></my-dir> Then app.directive(‘myDir’, function () { return { restrict: ‘E’, scope: { myindex: ‘=’ }, template:'<div>{{myindex}}</div>’, link: function(scope, element, attrs){ scope.myindex = attrs.myindex; console.log(‘test’, scope.myindex) } }; }) Demo: Plunker
Custom form validation directive to compare two fields
You do not need any directive. Just assign the “min” value of max to min-value. Like: <input name=”min” type=”number” ng-model=”field.min”/> <input name=”max” type=”number” ng-model=”field.max” min=” {{ field.min }}”/> And you do not need any customization. More: you can do min=” {{ field.min + 1}}”
AngularJS – Directives vs Controllers
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
AngularJS and contentEditable two way binding doesn’t work as expected
The problem is that you are updating the view value when the interpolation is not finished yet. So removing // load init value from DOM ctrl.$setViewValue(element.html()); or replacing it with ctrl.$render(); will resolve the issue.