$compile showing uncaught TypeError: undefined is not a function

Question

I am using the following code. To target the particular element and append a <div>inside that but getting uncaught typeerror: undefined is not a function for $compile(newDirective)($scope);

 $scope.grid= function (targetElement)
  {  
     console.log("target element",targetElement)
     var newDirective = angular.element("<div style='height:200px' > 
     Sample code 
     </div>");


     targetElement.append(newDirective);


     $compile(newDirective)($scope);


  }

Could you give more insight on the context in which you are executing this ? Are $compile and $scope defined ? — AlexHv
– AlexHv, Commented Apr 6, 2015 at 10:33
It means that you didn't inject $compile service. Show full code. — dfsq
– dfsq, Commented Apr 6, 2015 at 10:35
function DashboardCtrl($scope, $routeParams, $q, $http, $timeout,$compile) ..... I am adding these line to inject the $scope and $compile... — Shrinivas Pai
– Shrinivas Pai, Commented Apr 6, 2015 at 10:37

SVK · Accepted Answer · 2015-04-07 11:53:36Z

1

Try this code.

 $scope.grid= function (targetElement)
      {  
       var $div = $("<div style='height:200px' >  Sample code </div>");
       $(targetElement).append($div);

       angular.element(targetElement).injector().invoke(function($compile) {
       var scope = angular.element($div).scope();
       $compile($div)(scope);
      });
     }

answered Apr 7, 2015 at 11:53

SVK

2,2272 gold badges22 silver badges41 bronze badges

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

Collectives™ on Stack Overflow

$compile showing uncaught TypeError: undefined is not a function

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related