Question

我希望能够使用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()");
      }
    }
  })();

当我单击按钮时，它应该控制台记录一些内容。

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，不同之处在于您必须在角度引导之前修改html，以便可以正确编译修改后的html和js代码。这是AngularJS Developer Guide - Bootstrap，其中包含有关angularjs引导程序的更多信息

Answer 2

通常来说，如果将 JS修饰的内容动态添加到文档中，则该文档将被创建-例如动态创建<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！我做了一件新东西，希望您观看！”

This SO answer-Working with $compile in angularjs对如何使用$compile函数有相当不错的解释。

angularjs ng-click“如何使用javascript的setAttribute（）创建具有某些功能的ng-click属性”

2 个答案: