angularjs 点击次数 "How can I use javascript's setAttribute() to create ng-click attribute with some function"

Question

我希望能够 select 使用 querySelector 的按钮并设置 "ng-click=doSomething()" 的属性

我试过 select 按钮然后设置属性（"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()");
      }
    }
  })();

当我点击按钮时，它应该在控制台记录一些东西。

Answer 1

(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 , the difference is you have to modified the html before angular bootstrapped so your modified html and js code can be compiled properly. Here is a AngularJS Developer Guide - Bootstrap 了解更多 angularjs bootstrap

的信息

Answer 2

一般来说，如果您动态添加 "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 个 nearly-identical 按钮。然而，由于 when 我们构建了这些 ng-click'ed 按钮（即在初始编译阶段之后），特别是当我们添加 ng-click 属性时（也在初始编译阶段之后），按钮实际上不是 "known" 到 AngularJS 循环。

换一种方式看，当 AngularJS 在页面上第一个 "loaded" 时，它首先遍历该页面上的 HTML，然后查找任何数据绑定（{{likeThis}}; 我们暂时忽略这些）或指令。 ng-click、ng-repeat 和其他 Babbys First AngularJS 东西是只是标准化指令，所以它们是 "looking for directives" 程序的一部分.当 AngularJS 找到所述指令时，它显示 "Okay, you've got an ng-click on this element; I'll keep an eye on that".

要实际添加新的 AngularJS-ified 元素 - 或向现有元素添加 AngularJS 行为，我相信你更是如此 - 你需要使用 $compile函数，基本上说 "hey, AngularJS! I made a new thing and want you to watch it!"

-- 对如何使用 $compile 函数有一个相当不错的解释。

angularjs 点击次数 "How can I use javascript's setAttribute() to create ng-click attribute with some function"

angularjs ng-click "How can I use javascript's setAttribute() to create ng-click attribute with some function"

angularjs

angularjs-ng-click

setattribute