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() { $http.post(‘/save’, scope.$parent.data).success(returnedData) { // callback defined on my utils service here scope.callback(); // fires alert } }); } } }); For …
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.
Use ng-model-options $scope.onchange = function () {} <input type=”text” ng-model=”x” ng-change=”onchange()” ng-model-options=”{updateOn: ‘blur’}”/>
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 …
You can use ng-attr-<some attribute> ng-attr-xlink:href=”https://stackoverflow.com/questions/15895483/{{xxx}}” works for me. Note that you also need an empty xlink:href=”” as initial value. – Derek Hsu
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: app.run(function($rootScope){ $rootScope.$on(“$includeContentLoaded”, function(event, templateName){ //… }); }); when it finishes loading the content
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: http://plnkr.co/edit/n7SZpyeQ9nbjVSYA7ibB?p=preview
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: https://docs.angularjs.org/api/ng/directive/ngTransclude 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>’ …
This should do the trick. var MyApp = angular.module(‘MyApp’, []); MyApp.directive(‘myTag’, function() { return { link: function(scope, element, attributes){ element.addClass(‘MyClass’); } } });
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.