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 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('<input type="checkbox" ng-model="Question.checked"/><button ng-if="input.checked" >X</button>');
                    break;
                case 'text':
                    element.append('<button class="btn btn-info" ng-click="selectProperties()" title="Assign this user"><span class="glyphicon glyphicon-user"></span>Assignment</button>');
                    break;
            }
        }
    };
});

So when i click on the button the selectproperties function should be called which is within the controller surrounding the element being appended. However it is not being called, and I know the function works correctly because if i put this button code straight into the html page it will work.

I have seen that using $compile is a way of getting around this, but when i use that it just causes my web page to freeze, and no errors come up in console.

I tried a couple other methods like adding a controller with the method into my directive -

    controller: function ($scope, $element) {
        $scope.selectProperties = function () {
            aler('test');
        }
    }

but this also didn't work. And I need to be able to use the function call to update an object in my main controller so I'm not sure I could do it that way.

Any ideas?

Kalhan · Accepted Answer · 2015-06-22 08:46:20Z

5

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 = '<button class="btn btn-info" ng-click="selectProperties()" title="Assign this user"><span class="glyphicon glyphicon-user"></span>Assignment</button>';
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('<input type="checkbox" ng-model="Question.checked"/><button ng-if="input.checked" >X</button>');
          break;
        case 'text':
          var strElm = '<button class="btn btn-info" ng-click="selectProperties()" title="Assign this user"><span class="glyphicon glyphicon-user"></span>Assignment</button>';
          var compiledHtml = $compile(strElm);
          element.append(compiledHtml);
          break;
      }
    }
  };
});

answered Jun 22, 2015 at 8:46

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

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

3 Comments

user3407039 Over a year ago

Hi this works, thanks! Only issue now (which I took out of my original post; didn't think it was relevant) is that if i try to add something from the scope into the string it won't work and will just appear as undefined - + scope.Question.label +. This would have worked the way I had it before.

Kalhan Over a year ago

I think you need to raise a separate question there by describing what you have tried and with some codes. :)

user3407039 Over a year ago

I think you're right. I'll accept your answer since it solves the problem I was asking about. The way I was using $compile from a couple other examples I'd seen was just slightly different.

Collectives™ on Stack Overflow

AngularJS: Adding ng-click within element.append

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related