AngularJS: Adding ng-click within element.append

Question

Within my directive I have the following code, which will be used to continually append to an html element.

//Establishes the type of question and therefore          


        

Answer 1

You should compile the html to bind the directives like ng-click to scope properties. Other vice angular directives will not bind to the scope properties.

var strElm = 'Assignment';
var compiledHtml = $compile(strElm);
element.append(compiledHtml);

and don't remove $compile service from directive,

and your code should be like,

//Establishes the type of question and therefore what should be displayed
app.directive('questionType', function($http, $compile) {
  return {
    restrict: 'A',
    link: function(scope, element, attr, model) {

      switch (scope.Question.inputType) {
        case 'checkbox':
          //element.append('X');
          break;
        case 'text':
          var strElm = 'Assignment';
          var compiledHtml = $compile(strElm);
          element.append(compiledHtml);
          break;
      }
    }
  };
});