CODEWITHSUNDEEP
angularjs
methuselah
methuselah

Reputation: 13216

ng-click not working when element compiled in controller

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';
  }
};

Upvotes: 0

Views: 332

Answers (1)

Pengyy
Pengyy

Reputation: 38219

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>

Upvotes: 1

Related Questions