Угловые функции не работают на вновь добавленных кнопочных элементах

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("}]}");

javascript angularjs

0

Username 24 Апр 2017 в 09:03

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>

1

Jai 24 Апр 2017 в 06:49

Answer 2

Используя $ compile, вы можете динамически создавать элементы и связывать их с вашим контроллером.

Пример в JSFiddle

Создайте переменную, которая будет содержать элемент, содержащий все кнопки. Вы компилируете этот элемент.

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

0

Giovani Vercauteren 24 Апр 2017 в 06:25

Угловые функции не работают на вновь добавленных кнопочных элементах

2 ответа

Похожие вопросы

Новые вопросы

javascript