angularjs-compile

Let's say we have some nested directives: <big-poppa> <baby-bird></baby-bird> </big-poppa> And let's say that big-poppa wants to create a component that all of his children directives can share. It would be nice to put it in the controller, but this component needs the DOM, so it needs to be build in the link function. Then let's say the baby-bird component wants to read from component. Maybe it wants to listen to events from it, maybe send it a command or two. The challenge is that controllers fire down the dom (first parent, then child), and post-link methods fire the other direction, so the

Reference Reference plunker: http://plnkr.co/edit/otv5mVVQ36iPi3Mp0FYw?p=preview Explanation of the issue Suppose that we have two directives, first-directive and second-directive . Now suppose we only have access to first-directive which we hope to wrap second-directive with and pass to it our own manipulated attributes. app.directive('firstDirective', function() { return { scope: true, priority: 1000, transclude: true, template: function(element,attributes){ console.log('template') return '<second-directive two="{{one}}"></second-directive>' }, compile: function(element,attributes) { console

I'm trying to dynamically compile an Angular component using $compile , but the scope isn't passed to the components scope, but to the $parent scope instead. Here is a simple component that binds to a myTitle -attribute and presents it: app.component('myComponent', { bindings: { myTitle: '<' }, template: ` <div> <div>Doesn't work: {{ $ctrl.myTitle}}</div> <div>Works: {{ $parent.$ctrl.myTitle}}</div> </div>` }); Then in the controller (or directive, etc.) I compile it using $compile: app.controller('MainCtrl', function($scope, $element, $compile) { var template = '<my-component></my-component>'

I was wondering what is the best way to pass functions down through 2 or more levels of components? There's no simple way of skipping the function wrap when using '&' bindings? Here's an use case: angular.module('app', []).component('app', { controller: class AppController { doSomething (data) {} }, template: ` <sub-component on-do-something="$ctrl.doSomething(data)"> </sub-component> ` }) ps: I'm using ngRedux, so such scenario is very common EDIT: The problem is: for the code above to work, each inner component controller would look like this: .component('subComponent', { bindings: {

I read the the documentation from angular website about debugInfoEnabled . Still doesn't clear with concept, how $compileProvider.debugInfoEnabled(false) inside angular config can improve the performance of application by removing the element level class (angular-directives) binding such as ng-scope and ng-isolated-scope . Does anyone know, how performance boost can happen by setting up debugInfoEnabled to false in $compileProvider ? Can anyone help me to clear out my concept about angular $compileProvider.debugInfoEnabled feature of angular 1.3? Any Help would appreciated, Thanks in advance:)

I am trying to extend the angular-ui.github.io/bootstrap/ datepicker and it seems not to work. angular.module('myApp', [ 'ui.bootstrap' ]) .config(function($provide) { $provide.decorator('datepickerDirective', function ($delegate) { var directive = $delegate[0], link = directive.link; //works on 1.2 /* angular.extend(directive.scope, {'monthChanged': '&'}); */ // Not working in Angular 1.4 too. /*directive.$$isolateBindings['monthChanged'] = { attrName: 'monthChanged', mode: '&', optional: true };*/ // Not working in Angular 1.4 too. directive.bindToController = { 'monthChanged': '&' };