angularjs ng-click "Как я могу использовать setAttribute () javascript для создания атрибута ng-click с некоторой функцией" - PullRequest
Новая
       24

angularjs ng-click "Как я могу использовать setAttribute () javascript для создания атрибута ng-click с некоторой функцией"

0 голосов
/ 21 мая 2019

Я хотел бы иметь возможность выбрать кнопку с помощью querySelector и установить атрибут «ng-click = doSomething ()»

Я попытался выбрать кнопку, а затем установить setAttribute («ng-click», "doSomething ()"), но он не работает

мой DOM: 

<body>
    <div ng-app="myApp" ng-controller="mainCtrl">

        <button id="myBtn">click Me</button>

    </div>
    <script src="./js/app2.js"></script>
</body>

мой javascript: 

(function() {
    "use strict";

    angular.module("myApp", []).controller("mainCtrl", mainCtrl);

    /** @ngInject */
    function mainCtrl($scope) {

      init();
      function init() {
          $scope.doSomething = () => {
              console.log("doing something");
          }
          let btn = document.querySelector('#myBtn');
          btn.setAttribute("ng-click", "doSomething()");
      }
    }
  })();

когда я нажимаю кнопку, он должен поддерживать журналчто-то.

Ответы [ 2 ]

0 голосов
/ 22 мая 2019

Вообще говоря, если вы динамически добавляете материал "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 'ed кнопки (а именно, после начальной фазы компиляции), и, в частности, когда мы добавили атрибуты ng-click (также после начальной фазы компиляции),кнопки фактически не «известны» в цикле AngularJS ».

Другой взгляд: когда AngularJS впервые« загружается »на страницу, он сначала просматривает HTML-код на этой странице и ищет любые привязки данных.({{likeThis}}; пока мы их игнорируем) или директивы. ng-click, ng-repeat и другие материалы Babbys First AngularJS являются просто стандартизированными директивами, так что они являются частью этого "выглядящего"для директив ». Когда AngularJS находит указанные директивы, он говорит:« Хорошо, у вас есть ng-click для этого элемента;Я буду следить за этим ".

Чтобы действительно добавить новые элементы AngularJS-ified - или добавить поведение AngularJS к существующим элементам, как я полагаю, в большей степени относится к вам - вам нужно использовать$compile функция, которая в основном говорит "эй, AngularJS!Я сделал новую вещь и хочу, чтобы вы ее посмотрели! "

Этот SO-ответ - Работа с $ compile в angularjs имеет довольно приличное объяснение того, какиспользуйте функцию $compile.

0 голосов
/ 21 мая 2019 
(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 перед угловой загрузкой, чтобы ваш измененный html и js код можно было правильно скомпилировать.Вот AngularJS Developer Guide - Bootstrap с дополнительной информацией по angularjs bootstrap

...