angularjs-compile

问题 I have a composite list directive - that is - a list item that can be a list himself. The parent directive defines the controller: .directive('parent', function() { controller: function($scope) { }, link: function (scope, element, attrs) { } }) The list (of items) requires the parent controller which by itself works fine (why shouldn't it..): .directive('list', function() { require: '^parent', link: function (scope, element, attrs, parentCtrl) { } }) The same goes as well for the concrete

问题 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

问题 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 '

问题 It is possible to run javascript in a directive before returning anything, as well as in a directive's compile step before returning anything: angular.module('foo').directive('fooDirective', [function(){ console.debug('before return'); return { restrict: 'E', controller: function($scope){ console.debug('controller'); }, compile: function(scope, elem){ console.debug('compile'); return { pre: function(scope,elem, attr){ console.debug('pre'); }, post: function(scope,elem,attr){ console.debug(

问题 I've using the excellent Angular UI bootstrap in a large site alongside lots of my own directives. For the sake of neatness I looked for a way of renaming a couple of the uib directives without touching their code and came across a couple of SO questions and what looked like a great solution. The trouble is that it's not working for me. Here's my code. angular.module('s4p').config(function($provide, $compileProvider){ console.log("I am logged in the console"); $provide.decorator(

问题 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

问题 I have a custom directive that simply $compiles a template into another. .directive('staticInclude', function($http, $templateCache, $compile) { return function(scope, element, attrs) { var templatePath = attrs.staticInclude; // $http.get(templatePath, { cache: $templateCache }).success(function(response) { var contents = element.html(response).contents(); $compile(contents)(scope); }); }; }); I use it like: <div static-include="components/campaign/details.html"></div> Because I'm using

问题 I want to append another instance of my directive into the parent directive but i can't use $apply to recompile my directive. I think i miss something here somewhere :) My HTML Code <div ng-app="TestApp"> <div ng-controller="TestCtrl"> <input ng-model="NewData" /> <button ng-click="AddNewData($event)">Add New</button> <br /><br /> <div test-collector="testColScope" id="testCol"> <div test-data="" xx-value="Mouse" xx-href="https://fb.com"></div> <div test-data="" xx-value="Keyboard" xx-href=

问题 When $compile -ing an angular HTML template string I'm trying to put additional controllers and directives inside a <script> tag and use those in the HTML template. This way I'm essentially trying to implement some sort of plug-in-mechanism , so that I can load external files that augment my app's functionality. The <script> tag does actually get evaluated, but my problem is, that the HTML template compilation takes place before the evaluation of the JavaScript. So the compiler complains

问题 The usual order of execution of compile and link function on nested directives is as below Markup <dir1> <div dir2=""> </div> </dir1> Order of execution 1) compile of directive 1 2) compile of directive 2 3) link of directive 2 4) link of directive 1 Assuming dir1 has restrict property set to 'E' and dir2 has restrict set to 'A' Now if you use a ng-repeat directive in the same markup, the order of execution changes Markup <dir1> <div ng-repeat="item in items"> <div dir2=""> </div> </div> <