Meine angular js Direktive funktioniert nicht für append div

Question

Ich lerne eckig. Ich versuche also, meine erste Direktive zu erstellen, die mit DOM interagiert, aber nicht funktioniert. Bitte sag mir was ich im Code vermisse. Hier ist Code.

<div class="main" ng-app="myApp"> 
<button data-ng-click="submit()" my-directive>click</button> 
</div> 

app.module('myApp', []); 
app.directive('myDirective',function(){ 
    return function(scope, element, attrs){ 
      element.click(function(){ 
       alert('hello'); 
       element.parent().find('.main').append('<div>Some text</div>'); 
      }) 
     } 
}) 

meine js Geige Link https://jsfiddle.net/tridip/2fooy06c/

Answer 1

element.click keine Funktion ist. müssen Sie Ereignis mit .bind

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

myApp.directive('myDirective',function(){ 
    return { 
     link: function(scope, element, attrs){ 
      element.bind('click',function(){ 
       alert('hello'); 
       element.parent().append('<div>Some text</div>'); 
      }) 
      } 
     } 
}) 

DEMO anbringt: http://jsfiddle.net/Lvc0u55v/2018/

Answer 2

Sie fehlt den 'link' Eigenschaft:

app.directive('myDirective',function(){ 
    return { 
     link: function(scope, element, attrs){ 
      element.click(function(){ 
       alert('hello'); 
       element.parent().find('.main').append('<div>Some text</div>'); 
      }) 
      } 
     } 
}) 

Answer 3

Bitte Code wie unten ändern und es wird funktionieren. Es gibt keine solche Funktion wie click im Element. Bitte überprüfen Sie diese Dokumentation https://docs.angularjs.org/api/ng/function/angular.elementhere

Vergessen Sie auch nicht type und link Attribut in Ihrer Richtlinie aufzunehmen. Type wird verwendet, um anzugeben, welche Art von Direktive erstellt wird. Siehe here für weitere Details

app.directive('myDirective',function(){ 
return { 
    type: "A", 
    link: function(scope, element, attrs) { 

    element.on("click", function() { 
     alert('hello'); 
     element.parent().append('<div>Some text</div>'); 
    }); 

    } 

} 
}); 

beziehen sich auf diese plnkr Beispiel https://plnkr.co/edit/CYyOKzjR1kBR3U0tG3jv?p=preview für mehr Details

Answer 4

Sie müssen Klickfunktion binden. Siehe demo

app.directive('myDirective', function() { 
return { 
    link: function ($scope, element, attrs) { 
     element.bind('click', function() { 
      alert('hello'); 
      element.parent().append('<div>Some text</div>'); 
     }); 
    } 
    }; 
});