Question

有些机构可以解释为什么下面的指令没有被调用吗？如果我直接将指令添加到按钮，它会被调用。我尝试使用$ timeout添加但仍然没有运气。

<html>      
       <head>
          <title>AngularJS</title>
          <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

          <script type="text/javascript">

          var app = angular.module('MyApp',[]);

          app.controller('MyCtrl',function($scope,$timeout){

          document.getElementById('myBtn').setAttribute('my-directive','');

          });

          app.directive('myDirecitive',function(){

             function linkFn (scope,element,attrs){
                element.bind('click',function(){
                   alert('Clicked');
                });         
             }

             return {
                restrict:'A',
                link:linkFn
             }
          });         

          </script>

       </head>

       <body ng-app="MyApp", ng-controller="MyCtrl">       
          <button id="myBtn">Test</button>           
       </body>
    </html>

Answer 1

 app.directive('myDirecitive',function(){

应该是

app.directive('myDirective',function(){

最好不要查询控制器内的DOM。不要这样做

document.getElementById('myBtn').setAttribute('my-directive','');

my-directive是作为属性指令创建的，所以最好将它直接添加到这样的元素中。

<button id="myBtn" my-directive>Test</button>

我创建了一个plunker

https://plnkr.co/edit/pispsMzbJIxrIDyIv81N?p=preview

为什么角度指令在以编程方式添加时不起作用

1 个答案: