ng-click not working when element compiled in controller

Question

How do I use $compile to get ng-click working on a block of code? My code currently displays a suggestion box when the parameters for a particular event are met. However, I want to let the user hide the suggestion box by clicking on the close button.

View

  <textarea class="form-control suggest" 
            ng-keyup="vm.suggestActivate($event.keyCode)" 
            ng-mouseenter="vm.suggestActivate(32)" 
            rows="3" 
            ng-model="vm.summaryData"></textarea>

Controller

var vm = this;

var suggestionElement = document.createElement('div');

vm.suggestActivate = function(keyCode) {
  if(keyCode === 32) {
    if(vm.summaryData) {
      var words = vm.words;
      var suggestions = null;
      suggestions = '<div style="padding-bottom: 20px"><strong>Suggested next word:</strong></div>'

      for(var i = 0; i < 5; i++) {
        suggestions += '<div style="padding-bottom: 20px">' + words[Math.floor(Math.random() * words.length)] + '</div>';
      }

      suggestions += '<div class="btn btn-default" ng-click="vm.suggestDeactivate()">Close</div>'
      suggestionElement.innerHTML = suggestions;
      suggestionElement.setAttribute('style', 'background: #B0B0B0; padding: 20px; position: relative; top: -3.9em; width: 25%');
      suggestionElement.style.display = 'block';

      var targetElement = event.srcElement;
      targetElement.parentNode.appendChild(suggestionElement);
    }
  }
  else {
    suggestionElement.style.display = 'none';
  }
};

looks a little jQueryish way.. can you not keep the HTML already and use show/hide/if along with ng-style or similar approach to modify CSS? — tanmay
– tanmay, Commented May 11, 2017 at 7:25

Pengyy · Accepted Answer · 2017-05-11 08:05:17Z

1

try with $compile

targetElement.parentNode.appendChild($compile(suggestionElement)($scope));

mention that you have to inject $compile first.

ADD:

use angular.element to add new elements to DOM.

refer below demo:

angular.module("app", [])
  .controller("myCtrl", function($scope, $compile) {
    $scope.add = function() {
      var strNewElement = document.createElement('div');
      strNewElement.innerHTML = '<button ng-click="test()">Test</button>';
        angular.element(event.srcElement.parentNode).append($compile(strNewElement)($scope));
    };

    $scope.test = function() {
      alert('I am new element.');
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  <textarea ng-keypress="add()" rows="3"></textarea>
</div>

edited May 11, 2017 at 8:05

answered May 11, 2017 at 7:26

Pengyy

38.3k15 gold badges85 silver badges73 bronze badges

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

7 Comments

methuselah Over a year ago

I get the following error: Argument 1 ('node') to Node.appendChild must be an instance of Node when I replace ` targetElement.parentNode.appendChild(suggestionElement);` with targetElement.parentNode.appendChild($compile(suggestionElement)($scope));

Pengyy Over a year ago

@methuselah so where do you want to append new elements? since text-erea is an element not node.

methuselah Over a year ago

I want to append the new element to the bottom of the target text-area. Is this possible?

Pengyy Over a year ago

@methuselah you mean next to texterea?

methuselah Over a year ago

Sorry I meant underneath. It does this at the moment but I can not use ngclick

|

Collectives™ on Stack Overflow

ng-click not working when element compiled in controller

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related