Question

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

查看

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

Answer 1

尝试使用$(document).on('click', '.confirm', function(){ var stid = $(this).val(); $.ajax({ url: "comAssessment/change.php", method: "POST", data: {stid: stid}, dataType:"text", success: function (data) { $('#confirm').hide(); $('#result').html(data); } }); });

$compile

提到您必须首先注入targetElement.parentNode.appendChild($compile(suggestionElement)($scope));。

ADD：

使用$compile向DOM添加新元素。

参考下面的演示：

angular.element

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

在控制器中编译元素时，ng-click不起作用

1 个答案: