current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help

Tagged Questions

Compiles an HTML string or DOM into a template and produces a template function, which can then be used to link scope and the template together.

learn more… | top users | synonyms

1
vote
2answers
22 views

Working with $compile in angularjs

I am really confused with $compile in angularjs. can anyone help me, What use of $compile in angularjs with an example other then in this documentation. https://docs.angularjs.org/api/ng/service/$...
0
votes
1answer
28 views

How to get dynamic content with script tag working in AngularJS?

I'm trying to integrate AngularJS to existing web application. Some of data in application is loaded dynamically via $.ajax() and element.html(data). data can contain html code with javascript code in ...
0
votes
1answer
70 views

Angularjs - Scope value is not applied in template

I have used the directive scope in directive template. I have tried to get the html from template cache which was stored earlier. But the current directive scope is not applied to the directive. I ...
3
votes
3answers
31 views

AngularJS ng-if not deleting element after $compile

I have a directive that does the following: Adds another directive attribute to the element. Removes its own attribute. Calls $compile() on the element to make AngularJS re-compile the element so the ...
-1
votes
1answer
56 views

Angular $compile for dynamic content

Using Angular 1.5, I want to use a generic "overlay" component to display other components within a modal. I'd like to pass in other components to be rendered within the overlay. I thought I could ...
0
votes
1answer
72 views

AngularJS detect when $compile HTML string is done

I'm using $compile to compile a directive on the fly. What I would like to know is if there is a way to detect when the directive is done compiling (promise?) so that I can append it to the DOM. I ...
2
votes
1answer
87 views

Unit Test angularjs directive with watch on element height

I am planning to unit test a angular directive using jasmine. My directive looks like this angular.module('xyz.directive').directive('sizeListener', function ($scope) { return { link: function(...
0
votes
1answer
52 views

How do I pass data to a component compiled through the use of $compile in AngularJS?

I would like to construct a single page app. When a user clicks on a particular object I would like to replace the current component on the page with another component. The code below is situated in a ...
0
votes
1answer
90 views

Angular: How do I compile once then destroy all watches?

Due to performance issue, I would like to be able to simply compile a template piece once, then completely remove all watches etc from it, simply use the final template for display purpose only. I ...
0
votes
0answers
57 views

How to $compile angular directives and elements in html-code transfered via ajax

I am working on web app that uses Angularjs framework and Angular.material to achieve desired functionality and look. The view of my application has static and dynamic parts. The second is a table ...
0
votes
0answers
52 views

Error Expression in AngularJS

<div id="{{tagid}}" ng-repeat="item in arrItem"> {{addCompileTag(item)}} </div> </code> In addCompileTag(item) function, I use id of the div tag is "tagid" to $compile HTML DOM ...
4
votes
1answer
174 views

why ng-repeat changes order of link function execution

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 ...
3
votes
1answer
208 views

Can Angular directive compile ng-click elements

I wrote a directive that will render subelements with ng-click directive on them, this is the code I have : DIRECTIVE angular.module('myApp') .directive('popover', [ '$compile', function($...
0
votes
0answers
311 views

TypeScript AngularJS directive for compile?

How do I implement this in AngularJS 1.5.4 with TypeScript 1.6.2? Here is the vanilla JavaScript version from the official docs: $compile#example I've found this, but it doesn't work: Angularjs+...
1
vote
1answer
104 views

$watch in post link of compile not working

I am trying to apply $watch on a attribute in the post link function. My code is like this : compile: function(){ return { post:function(scope,element){ scope.$watch('...
0
votes
0answers
96 views

Get HTML & $Compile with html and body tags

I'm relatively new to AngularJS so I'm still very much in a learning phase. I've a service which purpose is to get a html template via $http, cache it and then compile it via $compile with some ...
1
vote
1answer
34 views

Dynamic Element with AngualrJS $compile

I am creating dynamic button and using $compile to bind ng-click event. I am adding two parameters there. Problem is that if the parameter is string and having space in between, Parameter is splitting....
1
vote
1answer
49 views

Prevent AngularJS from compiling contents of element

Is there a way to tell Angular to not compile contents of certain elements? Use case: Angular CMS contains textarea elements that have CKEditor attached. The CKEditor is using the divarea plugin ...
0
votes
0answers
31 views

Add angular content in link stage of a directive

I'm trying to make a custom tooltip that contains a table populated by ng-repeat. My directive looks like the following: app.directive('picker', function ($compile) { return { restrict: 'A',...
4
votes
2answers
207 views

Renaming 3rd party Angular Directive using $provide - not working

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 ...
0
votes
1answer
170 views

Angular ng-model don't work

I'm trying to replace specific string in my text with inputs with ng-models. I used following code: inlinetext.replace(buffer[x], '<input ng-model="singleQuestion.inlines[' + x + '].checkAnswer" ...
0
votes
0answers
47 views

Why does this compile script cause [$rootScope:infdig] error?

I'm trying to fetch a file, compile it, remove all angular related markup and then send the snippet elsewhere. However, I get lots of [$rootScope:infdig] errors but I can't understand why this is ...
0
votes
0answers
19 views

Does the template function generate new child scopes?

I'm trying to replace the ng-repeat directive with a custom one written by me. Here is the definition object link function: //directive definition object... //... ///link: function (scope....
0
votes
1answer
73 views

AngularJS $compile and external directive ui-codemirror

I am trying to use the external module, angular-ui-codemirror, to display the $element.html() of an enclosing AngularJS directive in a code-formatted block, using nested directive ui-codemirror. If ...
4
votes
1answer
2k views

What is the best way to pass functions between inner components in AngularJS 1.5?

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 ...
0
votes
2answers
93 views

How to stop nested directive execution from an outer directive?

I'm creating a directive which will restrict HTML access if some condition are not met. Unfortunately issue arises when inner directives get called before inner HTML is changed and compiled. Is it ...
0
votes
1answer
58 views

i am getting issue in changing inner html of div

Guys i found a problem in changing html of div please help me document.getElementsByClassName("lab")[0].setAttribute("ng-bind-html", "binds"); $scope.binds="<h1>run</h1>"; I am setting ...
2
votes
0answers
58 views

html is not compile on append new child in angular js

I am trying to insert a node dynamically, but the appended html is not getting compiled correctly. This is the code on Fiddle. <body ng-app="app"> <div ng-controller="appController"> ...
3
votes
2answers
71 views

Dynamically add a directive

I'm generating a report with collection of questions. app.controller('reportCtrl', ['$scope','$stateParams', function ($scope, $stateParams) { $scope.questions: [ { questionkey: 1, ...
0
votes
1answer
249 views

$sce.trustAsHtml returned value not compiled by $compile

I'm trying to make a custom popover with html by using angular bootstrap-ui popover with fullcalendar's events as described here: Getting Angular UI Calendar to work with UI-Bootstrap Tooltips But I ...
2
votes
3answers
122 views

I am getting error Error: [$compile:tplrt] while using directive in angularjs

In angularJS 1.3.14 var app = angular.module('myApp',[]); app.controller('myController',['$scope',function($scope){ $scope.name = 'world'; }]); //here i created directive of name ...
0
votes
1answer
47 views

Converting angularjs menu directives to support ui.router

I found a nice hover menu implementation online. it works great for assigning hrefs. I wanted to convert it to work with ui.router states and sref. I added a href and sref value on the menu data ...
1
vote
1answer
59 views

Dynamic AngularJS directive

I'm trying to dynamically insert a ng-options directive inside <select> elements across my application, which all have their own class names and other directives (like ng-if and so). <div ng-...
0
votes
1answer
87 views

Angular directive stops working after being moved from one DOM element to another

I have a modal service in my app that opens/closes a modal. When the modal is opened, it plucks its content from the div with the specified id, which always sits inside a container elem that is hidden....
1
vote
1answer
59 views

$compile containing function as attribute value

I'm facing one issue with $compile. The code I've written is very big hence I'm create one small example to replicate this issue. Suppose I've a button in my page. When user clicks on that button, ...
0
votes
0answers
182 views

AngularJS - pre-compile ng-repeat directive template

I have a performance problem with the ng-repeat directive. It's a simple case: the first ng-repeat directive iterates over table rows, and the second one (nested) over table columns inside each row. ...
1
vote
1answer
163 views

Angularjs dynamic html string compilation with an directive included inside

I have been trying a dynamic html string parsing with recursive directives which works but two-way binding doesn't seems to be working.Need a little help here.Below is the plunker: http://plnkr.co/...
2
votes
2answers
74 views

How to get the original attribute name before it was normalized/denormalize an attribute name?

I want to create a directive that I can use on <select> elements, to tell it to populate the <select> with a globally known list that's dynamically updated and shared among all the ...
4
votes
1answer
300 views

Angular dynamic templating with compile VS template function?

I already know what is the purpose of each item in : compile vs link(pre/post) vs controller So let's say I have this simple code : HTML <body ng-controller="mainController"> {{ ...
2
votes
0answers
420 views

Extending Scope function to Directive in Angular 1.4

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('...
1
vote
2answers
233 views

$compile not compiling ng-href in directive

When I pass a template in an attribute, and compile it to render it afther, $compile is working fine except for ng-href="expression", where the expression isn't compiled. Is this done in the compile ...
2
votes
1answer
1k views

Use angular compileProvider outside config block

I'm trying to create directives on the fly, actually I achived that, but seams pretty hacky. This was my first approach: function create(myDir) { angular.module("app").directive(myDir.name, ...
0
votes
1answer
349 views

Angular object undefined after compiled in html string pass to another Directive

I am doing something like this in Angular. After compiled, the object will not be passed to the DirectiveB correctly. However, if I passed the object defined in scope, it will be fine. I wonder why ...
1
vote
1answer
430 views

Add angularjs directive to a native html element (input text, div, span etc)?

I have something like this - <input type="text" value="" title="Title"> ... How can I add my custom directive as attribute to the existing html element on the page, let's say - directive as ...
0
votes
2answers
474 views

AngularJS: Why can't I add an attribute to grandparent element when parent has ngIf directive

I'm using vanilla AngularJS v1.4.5 (no jQuery) and would like my custom directive to add an attribute to its grandparent element at compile time. In the compile function, I can achieve this using the ...
2
votes
1answer
1k views

ng-click fired multiple times after compile

I have read many SO answer but couldn't resolve the problem. I have a Javascript function that create HTML element like document.createElement(...) This is a part of that function : var div=...
0
votes
1answer
124 views

pass scope function to cloned(and compiled) angular directive

I have an angular directive, which can take a parent controller function as attribute. During DOM manipulation, this angular directive is cloned, compiled and placed into the beginning part of the DOM....
1
vote
1answer
145 views

Angular composite (super) directive not allowing 2 way binding on component (child) directives

I have a need to create a composite directive that incorporates separate fully functional directives. One of my component directives adds an element to the dom and that element binds to a value in ...
4
votes
2answers
160 views

Directive priority with event listener

I have one input element with 2 directives: -direc (priority level 1) -directive (priority level 0) even if direc is supposed to execute first, directive is executing first. Why? Here is a snippet ...
1
vote
2answers
742 views

How to $compile angular template to make it work in multiple controllers with aliases?

I have a custom directive that simply $compiles a template into another. .directive('staticInclude', function($http, $templateCache, $compile) { return function(scope, element, attrs) { ...

1 2 3