У меня есть некоторый код 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("}]}");
2 ответа
Я полагаю, у вас нет правильного создания 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>
Используя $ compile, вы можете динамически создавать элементы и связывать их с вашим контроллером.
Создайте переменную, которая будет содержать элемент, содержащий все кнопки. Вы компилируете этот элемент.
var anElement = angular.element(document.getElementById("search-results"));
anElement.html('<button type="button" ng-click="main.aFunction()">New Button</button>');
$compile(anElement)($scope);
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.