Question

我正在尝试用div中的新内容替换html内容，但在替换html click事件后无效。

<div id="search-autocomplete" ng-bind-html="htmlElement()"></div>

$scope.htmlElement = function()
{
    return $sce.trustAsHtml('<div id="searchr-result-containter"><div id="autocomplete-content"><div id="search-result" >'+data.result+'</div></div></div>');
};

提前致谢：）

Answer 1

我正在使用ng-click事件并将带有所有参数的操作URL传递到成功事件中，所有HTML内容将使用$ compile（result.toolbarlistproduct）（$ scope）替换为div，因此，$ compile将呈现所有HTML并且所有活动都很好。

下面的代码对我来说很好......

<a href="javascript:void(0);" ng-click="FilterList('your action link'); $event.preventDefault();$event.stopPropagation();">Set Ascending Direction</a>
<div id="search-autocomplete"></div>

var myApp = angular.module('myApp', ['ngRoute']);    

myApp.controller("myCtrl", function($scope,$http,$compile) {
    // onClick event  
    $scope.FilterList = function(href) { 
        $http.get(href+'&isAjaxToolbar=1'
        ).success(function(result, status, headers, config) { 
            // onSuccess 
            if (result.toolbarlistproduct != '') {    
                angular.element('#search-autocomplete').replaceWith($compile(result.toolbarlistproduct)($scope));
            }
        });
    }
});

希望这会对你有所帮助.. :)

Answer 2

请查看工作示例： - https://jsfiddle.net/Shital_D/oyx0fd6e/1/

HTML

<div ng-app="myApp">
  <div ng-controller="myController">
      <div compile="htmlElement()"></div>
   </div>
</div>

创建指令

app.directive('compile', function ($compile) {
return function (scope, element, attrs) {
    scope.$watch(
            function (scope) {
                return scope.$eval(attrs.compile);
            },
            function (value) {
                element.html(value);
                $compile(element.contents())(scope);
            }
       );
   };
});

和控制器

app.controller('myController', function ($scope, $compile) {
    $scope.callMe = function () {
        alert("In");
    }
    $scope.htmlElement = function () {
        var data = {};
        data.result='<button ng-click="callMe()">clickme</button>';
        return '<div id="searchr-result-containter"><div id="autocomplete-content"><div id="search-result" >' + data.result + '</div></div></div>';
    }
});

在AngularJS中将html替换为div后，Click事件不起作用

2 个答案: