Я хотел бы иметь возможность выбрать кнопку с помощью querySelector и установить атрибут "ng-click=doSomething()"
Я попытался выбрать кнопку, а затем setAttribute("ng-click", "doSomething()"), но она не работает
мой ДОМ:
<body>
<div ng-app = "myApp" ng-controller = "mainCtrl">
<button id = "myBtn">click Me</button>
</div>
<script src = "./js/app2.js"></script>
</body>
мой джаваскрипт:
(function() {
"use strict";
angular.module("myApp", []).controller("mainCtrl", mainCtrl);
/** @ngInject */
function mainCtrl($scope) {
init();
function init() {
$scope.doSomething = () => {
console.info("doing something");
}
let btn = document.querySelector('#myBtn');
btn.setAttribute("ng-click", "doSomething()");
}
}
})();
когда я нажимаю кнопку, он должен что-то регистрировать в консоли.
можно ли добавить аргумент в doSomething, если я сделаю это таким образом?
Да, это возможно, но я не буду писать ответ. В среде AngularJS контроллеры не должны выполнять манипуляции с DOM. Манипуляции с DOM должны выполняться только в директивах. Контроллеры должны только манипулировать моделью. Директивы соединяют модель с представлением и представление с контроллером. Переплетение ролей затрудняет понимание, тестирование, отладку и сопровождение кода. См. Не проектируйте свою страницу, а затем изменяйте ее с помощью манипуляций с DOM..
в моем реальном проекте я использую компоненты, и я использую их в контроллере компонентов. приведенный выше код является всего лишь образцом.
(function() {
"use strict";
var btn = document.querySelector('#myBtn');
btn.setAttribute("ng-click", "doSomething()");
angular.module("myApp", []).controller("mainCtrl", mainCtrl);
function mainCtrl($scope){
$scope.doSomething = function(){
alert('abc');
}
}
angular.bootstrap(document, ['myApp']);
})();
Пожалуйста, проверьте JSFiddle , разница в том, что вы должны изменить html перед загрузкой angular, чтобы ваш измененный код html и js мог быть правильно скомпилирован. Вот Руководство разработчика AngularJS — Bootstrap с дополнительной информацией о начальной загрузке angularjs
Вообще говоря, если вы динамически добавляете «AngularJS-ified» материал в документ после, который он создал, например, динамическое создание элементов <button>
и последующее добавление к ним атрибутов ng-click
, эти элементы не будут отслеживаться наблюдателями и не будут частью обычного дайджеста. цикл. Так, например, рассмотрим следующий простой пример:
const myApp = angular.module('stuff', [])
.controller('stuff-cont', function($scope) {
const targ = document.querySelector('#target');
for (let i = 0; i < 10; i++) {
let newBtn = document.createElement('button');
newBtn.setAttribute('ng-click', 'sayRandNum()');
newBtn.innerText = `Button ${i}`
targ.append(newBtn);
}
$scope.sayRandNum = () =>{
alert('Your random number is '+Math.ceil(Math.random()*100));
}
})
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app='stuff' ng-controller='stuff-cont'>
<div id='target'>
</div>
The buttons above are clickable, they have an appropriately "structured" ng-click, but they <i>don't trigger</i>!
</div>
Здесь мы (по какой-то причине...) создаем 10 почти идентичных кнопок. Однако из-за когда мы создали эти кнопки с ng-click
(а именно, после начальной фазы компиляции), и, в частности, когда мы добавили атрибуты ng-click
(также после начальной фазы компиляции), кнопки фактически не «известны» AngularJS. цикл".
С другой стороны, когда AngularJS впервые «загружается» на страницу, он сначала просматривает HTML на этой странице и ищет любые привязки данных ({{likeThis}}
; мы их пока проигнорируем) или директивы. ng-click
, ng-repeat
и другие вещи Babbys First AngularJS являются просто стандартизированные директивы, поэтому они являются частью этой процедуры «поиска директив». Когда AngularJS находит указанные директивы, он говорит: «Хорошо, у вас есть ng-click
на этом элементе, я буду следить за этим».
Чтобы на самом деле добавить новые элементы, ориентированные на AngularJS, или добавить поведение AngularJS к существующим элементам, что, как я полагаю, больше относится к вам, вам нужно будет использовать функцию $compile
, которая в основном говорит: «Эй, AngularJS! Я сделал новую вещь. и хочу, чтобы вы его посмотрели!»
Этот ТАК ответ -- Работа с $compile в angularjs дает довольно приличное объяснение того, как использовать функцию $compile
.
Почему бы не использовать
btn.addEventListener("click",$scope.doSomething)
?