Question

我有一些Angular代码，它向URL发送查询，获取响应，并使用该响应向DOM添加按钮。这些按钮具有ng-click个属性。但是当我点击那些新添加的按钮时，没有任何反应。

$scope.search=  [
    {
        query: ''
    }
];

$scope.searchStuff= function(search){
    $http({
        url: "/search",
        method: "GET",
        params: {
            query: search.query
        }
    }).then(function successfulCallback(response){
        var resultsHTML = '';
        var idList = response.data;
        for (var i = 0; i < idList.length; i++) {
            var id = idList[i];
            resultsHTML += "<button ng-click=\"test("+id+")\">"+id+"</button> | "
        }
        document.getElementById("search-results").innerHTML=    resultsHTML;
    });
};

$scope.test = function(id){
    console.log(id);
}

目标区域的HTML：

<div id="search-wrapper">
    <form novalidate>
        <input type="text" name="search" placeholder="Search" ng-model="search.query">
        <button ng-disabled="!search.query" ng-click="searchStuff(search)">SEARCH</button>
        <div id="search-results"></div>
    </form>
</div>

$scope.test函数永远不会触发。我必须改变什么才能让它成功？

注意：我也有不同的插值提供程序。

$interpolateProvider.startSymbol("{[{");
$interpolateProvider.endSymbol("}]}");

Answer 1

我想你没有正确的按钮html创建，它可能会在浏览器控制台中出现一些错误。而是试试这个：

resultsHTML += '<button ng-click="test("'+id+'")">'+id+'</button> | '

而不是这样做，我建议你在模板中使用ng-repeat指令，如果有的话：

 $scope.idList = response.data; // assign the list to scope

<!-- now use in template as below -->
<div ng-repeat="id in idList">
   <button ng-click="test(id)">{{ id }}</button>
</div>

下面我添加了一个代码段，您可以看到这与上一次更改一样好test(id)

var app = angular.module('demoApp', []);
app.controller('demoCtrl', ['$scope', function($scope) {
  $scope.idList = [1, 2, 3, 4, 5];
  $scope.test = function(id) {
    console.log(id);
  };
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>


<div ng-app="demoApp" ng-controller="demoCtrl">
  <p ng-repeat="id in idList"><button ng-click="test(id)">{{id}}</button></p>
</div>

Answer 2

使用$ compile可以动态创建元素并将它们链接到控制器。

Example in JSFiddle

创建一个包含一个包含所有按钮的元素的变量。你编译那个元素。

var anElement = angular.element(document.getElementById("search-results"));
anElement.html('<button type="button" ng-click="main.aFunction()">New Button</button>');
$compile(anElement)($scope);

Angular函数不适用于新添加的按钮元素

2 个答案: