There are two ways to do this; one uses the helper directives already available (like ngInclude and ngController) and the second is manual; the manual version might be faster, but I cannot be sure. The Easy Way: The easy method is to simple create a new element with ngController and ngInclude attributes, append it to … Read more
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 … Read more
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 … Read more
You have to $compile your inner html like .directive(‘autotranslate’, function($interpolate, $compile) { return function(scope, element, attr) { var html = element.html(); debugger; html = html.replace(/\[\[(\w+)\]\]/g, function(_, text) { return ‘<span translate=”‘ + text + ‘”></span>’; }); element.html(html); $compile(element.contents())(scope); //<—- recompilation } })
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>’ … Read more