CODEWITHSUNDEEP
javascriptangularjscompiler-errors
Don M
Don M

Reputation: 986

$compile not compiling whole string

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.

Upvotes: 0

Views: 148

Answers (2)

Ram_T
Ram_T

Reputation: 8484

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.

Upvotes: 0

Sai
Sai

Reputation: 2658

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.

Upvotes: 2

Related Questions