current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

I want to dynamically add HTML content with angularJs, but getting and error:

"$compile is not defined"

What can be the reason?

Code

<td ng-repeat="user in users[0].yds" data-title="'Timeline'" sortable="timeline" style="text-align: center" >
    <div class="circle_dynamic"></div>
</td>


angular.module('elnApp')
  .controller('ProgramtableCtrl', function ($scope, $location, $filter, ngTableParams,    
     programTableService) {
        for(var i=0; i<=$scope.users[0].projects.length; i++){
            for(var j=0; j<$scope.users[0].projects[i].results.length; j++){

                if($scope.users[0].projects[i].results[j] == 0){

                    $(".circle_dynamic").html(
                      $compile(
                         ""
                      )(scope)
                    );
                    console.log('rm')
                }else{

                    $(".circle_dynamic").html(
                      $compile(
                         "<i ng-class='circle_class' style='position: absolute;'></i>"
                      )(scope)
                    );
                    console.log('add')
                }
            }

        }

    }, true);

}});

how to add html content dynamically? please help

share|improve this question
    
Where is this this code? In directive? In controller? Show us how you initialize it. –  package Aug 22 '13 at 6:33
    
this is in controller –  user2680731 Aug 22 '13 at 6:34
    
Why do you need to call $compile? Even if you do, you should do it in a directive and not in a controller. –  0xc0de Aug 22 '13 at 6:59
    
I bet you have strong jQuery background? I advice you to read the official tutorial and documentation because what you're doing is against Angular's conventions - this will make your development difficult and frustrating. –  package Aug 22 '13 at 7:18
    
ok , thanks for your advise –  user2680731 Aug 22 '13 at 7:29

4 Answers 4

up vote 0 down vote accepted

You don't need to call $compile here.

Note: Hardcoding index $scope.users[0].projects.length doesn't seem logically correct to me, are you sure you want that?

These lines in your code are very confusing. It will be easier for you to get the answer if you tell what is the data structure of user (ie. the relation between user, project and result) and what you want to achieve.

for(var i=0; i<=$scope.users[0].projects.length; i++){
    for(var j=0; j<$scope.users[0].projects[i].results.length; j++){

The following solution is assuming that

users is an array of users.

Each user has many projects, so user.projects is an array.

You want to show a div with class="circle_class" for each result if it exists.

With these assumptions, the following should be enough. 

<td ng-repeat="user in users[0].yds"
    data-title="'Timeline'"
    sortable="timeline"
    style="text-align: center" >
  <div ng-repeat="project in user.projects">
    <div ng-repeat="result in project.results"
         ng-show="result">
      <i ng-class='circle_class' style='position: absolute;'></i>
      </div>
  </div>
</td>
share|improve this answer
    
And what is i, j? Confusing part is you are iterating over users and showing results of projects of just the first user. If you really want that then define something like var projectOwner = $scope.users[0] and use it so that it will be clear. –  0xc0de Aug 22 '13 at 8:16
    
I want to show it if result value is one, how can I do it? –  user2680731 Aug 22 '13 at 8:20
    
This code will show icons for each results if result is one (non zero) for each project for each user. It doesn't show icons if the result is 0. –  0xc0de Aug 23 '13 at 4:45
    
ok, thanks for your help –  user2680731 Aug 23 '13 at 5:32
up vote 0 down vote

In angularjs, as a best practice you should use directives for DOM manipulations

Why do you need to compile it?

share|improve this answer
up vote 0 down vote

If you just want to add html content ng-bindHtmlUnsafe would do the trick.

In HTML

<div class="circle_dynamic" ng-bindHtmlUnsafe={{expression}}></div>

In controller

$scope.expression="<i ng-class='circle_class' style='position: absolute;'></i>"

See documentation here

share|improve this answer
    
documentation have no sample , I can't clear it –  user2680731 Aug 22 '13 at 6:38
    
You shouldn't try to modify DOM in a controller. –  0xc0de Aug 22 '13 at 7:03
up vote 0 down vote

"$compile is not defined" occurs because you forgot to inject it into your Controller.

Dynamically add HTML content with $compile is OK. But don't do it in your controller. Do it in a directive.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.