$compile not compiling whole string

Question

I am trying to compile html in my directive to move into a table via jquery.

For some reason my $compile does not grab this whole string, it just grabs the repeat directive. If I remove the <tr ng-repeat...> it will grab the remaining string though.

var el = $compile('<tr ng-repeat="row in gotData" ><td>{{row["data"]}}</td> <td>{{row["moredata"] % 5 |number:3}}</td> <td>{{row["moredata2"] % 5 | number:3}}</td><td>{{row["moredata3"] % 5 | number: 3}}</td><td>{{row["moredata"] % 5 | number: 3}}</td></tr>')(scope)

I am logging the 'el' and I can see that it is lacking the complete string, it just has the the repeat directive located here in this key:

el['0']['data']

hoping this is possible.

question - when do you load gotData? Outside directive or inside directive? If outside then check if you are running directive when ajax call is finished ( and values are bound to directive on finished ajax call which can be solved via ng-if directive ) — Matuszew
– Matuszew, Commented Dec 15, 2016 at 23:41
gotData is available in the scope from the controller. I was hoping it could get it from the controllers scope and not from the directive's scope. However, the same object is on a isolated two-way binding scope '='. — Don M
– Don M, Commented Dec 16, 2016 at 0:02
If I were to access it in the directive it would be scope.data.gotData — Don M
– Don M, Commented Dec 16, 2016 at 0:04

Sai · Accepted Answer · 2016-12-16 06:33:35Z

2

Look at this source from Angular docs.

var $compile = ...; // injected into your code
var scope = ...;
var parent = ...; // DOM element where the compiled template can be appended

var html = '<div ng-bind="exp"></div>';

// Step 1: parse HTML into DOM element
var template = angular.element(html);

// Step 2: compile the template
var linkFn = $compile(template);

// Step 3: link the compiled template with the scope.
var element = linkFn(scope);

// Step 4: Append to DOM (optional)
parent.appendChild(element);

You have to angularify the code before you compile it using $compile.

Hope, this will help. All the best.

answered Dec 16, 2016 at 6:33

Sai

2,6685 gold badges34 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Don M Over a year ago

jsfiddle.net/nwu2bjtt I am not sure if I am replicating what you have here right but I can't append off parent. I was concerned parent was a key word so I changed it.

Ram_T · Accepted Answer · 2016-12-16 06:36:20Z

0

You need to do something like this.

var throbberHolder = document.getElementById("throbber-mask");
$compile(throbberHolder)(angular.element(throbberHolder).scope()); or 
$compile(throbberHolder)(throbberHolder.scope());

In that the throbber-mask will be the id of your <tr> element.

answered Dec 16, 2016 at 6:36

Ram_T

8,50411 gold badges42 silver badges64 bronze badges

2 Comments

Don M Over a year ago

I will add a fiddle, scope is not available where it is being called.

Don M Over a year ago

jsfiddle.net/o8v7jmwc/6 I cleared them. the only one is a missing var for throbberHolder but when that exists it freezes the browser.

Collectives™ on Stack Overflow

$compile not compiling whole string

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related