Question

我试图动态添加新的DOM元素，它具有click事件处理程序 - 已定义的函数。这是代码：

HTML

<div ng-app="miniapp" ng-controller="Ctrl">
  <div id="div" ng-click="addingEvent()">DIV </div>
</div>

的JavaScript

var $scope;
var app = angular.module('miniapp', []);

function Ctrl($scope) {
   $scope.addingEvent = function(){
      var myEl = angular.element( document.querySelector( '#div' ) );
      myEl.append('<a ng-click="afterEvent()" href="#">anchor addedd </br> </a>'); 
   };

   $scope.afterEvent = function(){
      alert('after event');
   };

};

Here's the demo。如您所见，添加锚点时，无法正确处理click事件。如何解决？

Answer 1

将元素附加到DOM中是不够的：你必须让Angular知道它。一种可能的方法（为简洁起见，此处仅列出控制器）：

{
  "name": "[variables('webAppServiceName')]",
  "type": "Microsoft.Web/sites",
  "location": "[resourceGroup().location]",
  "apiVersion": "2016-08-01",
  "dependsOn": [
    "[concat('Microsoft.Web/serverfarms/', variables('appServicePlanName'))]"
  ],
  "tags": {
    "[concat('hidden-related:', resourceGroup().id, '/providers/Microsoft.Web/serverfarms/', variables('appServicePlanName'))]": "Resource",
    "displayName": "[variables('webAppServiceName')]"
  },
  "properties": {
    "name": "[variables('webAppServiceName')]",
    "serverFarmId": "[resourceId('Microsoft.Web/serverfarms', variables('appServicePlanName'))]"
  },
  "resources": [
    {
      "apiVersion": "2014-11-01",
      "name": "appsettings",
      "type": "config",
      "dependsOn": [
        "[concat('Microsoft.Web/sites/', variables('webAppServiceName'))]",
        "[concat('Microsoft.Web/certificates/', variables('certificateName'))]"
      ],
      "tags": {
        "displayName": "WebAppSettings"
      },
      "properties": {
        "WEBSITE_LOAD_CERTIFICATES": "[reference(resourceId('Microsoft.Web/certificates', variables('certificateName')), providers('Microsoft.Web', 'certificates').apiVersions[0]).thumbprint]"
      }
    },
    {
      "apiVersion": "2016-08-01",
      "name": "Microsoft.ApplicationInsights.Profiler.AzureWebApps",
      "type": "siteextensions",
      "dependsOn": [
        "[resourceId('Microsoft.Web/Sites', variables('webAppServiceName'))]"
      ],
      "properties": {}
    },
    {
      "apiVersion": "2015-08-01",
      "name": "logs",
      "type": "config",
      "dependsOn": [
        "[resourceId('Microsoft.Web/Sites', variables('webAppServiceName'))]"
      ],
      "properties": {
        "applicationLogs": {
          "fileSystem": {
            "level": "Off"
          },
          "azureTableStorage": {
            "level": "Off"
          },
          "azureBlobStorage": {
            "level": "[parameters('applicationLogLevel')]",
            "sasUrl": "xxx"
          }
        },
        "httpLogs": {
          "fileSystem": {
            "enabled": false
          },
          "azureBlobStorage": {
            "enabled": true,
            "sasUrl": "xxx"
          }
        },
        "failedRequestsTracing": {
          "enabled": "[parameters('enableFailedRequestTracing')]"
        },
        "detailedErrorMessages": {
          "enabled": "[parameters('enableDetailedErrorMessages')]"
        }
      }
    }
  ]
}

这里有the demo，也可以应用一些好的做法。然而，事实上，我宁愿将此功能实现为指令（根据Angular 1.5的组件）。

Answer 2

所以，我已经使用ng-if语句修改了你的代码。不需要使用旧的JS方法在DOM中删除或添加元素。

HTML

<div ng-app="miniapp" ng-controller="Ctrl">

<div id="div" ng-click="addingEvent()">DIV <span><a ng-click="afterEvent()" href="#" ng-if="showAnchor">anchor addedd </a></span></div>


</div>

SCRIPT

var $scope;
var app = angular.module('miniapp', []);

function Ctrl($scope) {

            $scope.showAnchor=false;
      $scope.addingEvent = function(){

            $scope.showAnchor=true;

    };
     $scope.afterEvent = function(){
       alert('after event');
    };

};

Answer 3

解决Jsfiddle demo updated

    myEl.append($compile('<a ng-click="afterEvent()" href="#">anchor addedd </br> </a>')($scope));

这将有效

动态添加DOM元素点击事件功能在angularJs应用程序中不起作用

3 个答案: