Angularjs ng在控制器中编译元素时单击“不工作”

如何使用$compile使ng click处理代码块？当满足特定事件的参数时，“我的代码”当前会显示一个建议框。但是，我想让用户通过单击关闭按钮隐藏建议框

看法

控制器

尝试使用$compile

提到您必须首先注入$compile

加：

使用angular.element向DOM添加新元素

请参阅以下演示：

angular.moduleapp，[] .controllermyCtrl，函数$scope，$compile{ $scope.add=函数{ var strNewElement=document.createElement'div'； strNewElement.innerHTML='Test'； angular.elementevent.srcElement.parentNode.append$CompilerNewElement$scope； }; $scope.test=函数{ 警惕“我是新元素”； }; };

---

看起来有点怪。。您不能已经保留HTML并使用show/hide/if以及ng样式或类似的方法来修改CSS吗？我得到以下错误：当我替换'targetElement.parentNode.appendChildsuggestionElement；'时，参数1'node'到node.AppendChildChild必须是node的实例使用targetElement.parentNode.appendChild$CompilesSuggestionElement$scope@那么你想把新元素添加到哪里呢？因为文本erea是一个元素而不是节点。我想将新元素附加到目标文本区域的底部。这可能吗？@methuselah你是说在texterea旁边？对不起，我是说在下面。它现在可以这样做，但我不能使用ngclick

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

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

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