Callback function inside directive attr defined in different attr

So what seems like the best way is using the isolated scope as suggested by ProLoser app.directive(‘mySave’, function($http) { return { scope: { callback: ‘&mySaveCallback’ } link: function(scope, element, attrs) { element.on(“click”, function() { $‘/save’, scope.$ { // callback defined on my utils service here scope.callback(); // fires alert } }); } } }); For …

Read more

Check existence of attribute in AngularJs Directive

The way to do this is to check for the existence of the attributes within the link function’s attrs parameter, and assign this to variables within your directive’s isolate scope. scope:{}, link: function(scope, element, attrs){ scope.status=”status” in attrs; }, This should work without having to use an if statement within your link function.

how to fix Angular not using explicit annotation and cannot be invoked in strict mode

From the documentation it looks like you need to declare all dependency injections in string array. There are other ways but normally I would do it like this: controller: [‘$scope’, ‘$element’, ‘$attrs’, ‘mouseCapture’, function($scope, $element, $attrs, mouseCapture) { … } ] One of the reason we do this is because when we try to minify …

Read more

Finished Loading of ng-include in angular js

There are two ways to detect when ng-include finished loading, depending on your need: 1) via onload attribute – for inline expressions. Ex: <div ng-include=”‘template.html'” onload=”loaded = true”></div> 2) via an event $includeContentLoaded that ng-include emits – for app-wide handling. Ex:$rootScope){ $rootScope.$on(“$includeContentLoaded”, function(event, templateName){ //… }); }); when it finishes loading the content

Insert directive programmatically AngularJS

You have to create the dom element first, then compile it and add it to the document. Something like this: $scope.$on(‘insertItem’,function(ev,attrs){ var chart = angular.element(document.createElement(‘chart’)); var el = $compile( chart )( $scope ); //where do you want to place the new element? angular.element(document.body).append(chart); $scope.insertHere = el; }; I’ve created a simple example here:

AngularJS : transcluding multiple sub elements in a single Angular directive

Starting Angular 1.5, it’s now possible to create multiple slots. Instead of transclude:true, you provide an object with the mappings of each slot: angular.module(‘multiSlotTranscludeExample’, []) .directive(‘pane’, function(){ return { restrict: ‘E’, transclude: { ‘title’: ‘?pane-title’, ‘body’: ‘pane-body’, ‘footer’: ‘?pane-footer’ }, template: ‘<div style=”border: 1px solid black;”>’ + ‘<div class=”title” ng-transclude=”title”>Fallback Title</div>’ + ‘<div ng-transclude=”body”></div>’ …

Read more