Angular $compile not working

Question

I need to add dynamically a button to my html code. The thing is that it has an angular link inside and it dosen't work once the page loads. I've been researching and it looks like I need to use $compile in order to make it work.

Here the two codes I tried:

CODE 1

angular.injector(['ng']).invoke(['$compile', '$rootScope', function(compile, rootScope){

        var scope = rootScope.$new();

        var result = compile('<a ui-sref="app.form.matter({method:\'new\',id:\'\'})" type="button" class="btn dark_blue_bomhard m-b-5 nuevocliente" >New matter</a>')(scope);
        scope.$digest();
        $("div.toolbar").append(result);
    }]);

This code gives me no error and even puts the button where it has to be, but the link still dosen't works.

CODE 2

angular.element("div.toolbar").append($compile('<a ui-sref="app.form.matter({method:\'new\',id:\'\'})" type="button" class="btn dark_blue_bomhard m-b-5 nuevocliente" >New matter</a>'))(scope);

This second line of code gives me an error: "ReferenceError: $compile is not defined"

I have both codes (not at the same time) in the controller.

Any ideas?

confusing yourself with injections changing the names between string version and function arguments — charlietfl
– charlietfl, Commented Feb 26, 2016 at 15:19
The button doesn't work because you didn't include ui-route in the injector. — georgeawg
– georgeawg, Commented Feb 26, 2016 at 15:28

Colin Lee · Accepted Answer · 2016-03-03 03:52:45Z

4

I meet the same problem before, I fixed it by

app.controller('controller', [
  '$scope','$http', '$window', 'promiseTracker', '$timeout', '$compile',
  function($scope, $http, $window, promiseTracker, $timeout, $compile) {
  ...........
  }]);

Define the $compile before you use it, so there won't be such error of "ReferenceError: $compile is not defined".

answered Mar 3, 2016 at 3:52

Colin Lee

2012 silver badges5 bronze badges

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

Comments

BGilman · Accepted Answer · 2016-02-26 17:08:30Z

2

Why not just make it a directive? Angular directives call $compile by default and you can give it an option to instantiate its own scope.

angular
   .module('app.module')
   .directive('myButtonDirective', myButtonDirective);

function myButtonDirective() {
   var directive = {
      templateUrl: 'app/button-directive.html',
      scope: {},
      restrict: 'E',
      replace: true
   };
   return directive;
}

Then your app/button-directive.html would look like

<a ui-sref="app.form.matter({method:'new',id:'\'})" type="button" class="btn dark_blue_bomhard m-b-5 nuevocliente">New matter</a>

All you have to do is place your new directive in your html

<div class="toolbar">
    /** Your HTML Here **/
    <my-button-directive></my-button-directive>
</div>

answered Feb 26, 2016 at 17:08

BGilman

1602 silver badges11 bronze badges

1 Comment

Miguel Cantó Bataller Over a year ago

This looks that something I would have to know if I want to use angular. Thank you. I've tried that code. I get no errors, but the button dosen't show up. If I look at the code, the button is there. Gonna keep trying.

Collectives™ on Stack Overflow

Angular $compile not working

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related