2016-07-21 8 views
2

Jemand erstellt benutzerdefinierten Tag in dem Projekt, wieWie fügt man ng-click von angular für das von Jquery erstellte Element hinzu?

<mytable config='{head:[title1, title2],data:[[col1, col2]]}'></mytable> ,

den Tag über eine Tabelle generieren, nachdem die Seite geladen wird.

Ich möchte eine Schaltfläche in der Tabelle erstellen, dann füge ich die Zeichenfolge:

'<button class="btn btn-primary" ng-click="lookup(3)">lookup</button>';

aber die ng-Klick funktioniert nicht. Ich schreibe einen einfachen Code, um es zu verspotten:

<!DOCTYPE html> 
<html ng-app="myApp"> 
    <head> 
     <script type="text/javascript" src="/javascripts/jquery.min.js"></script> 
     <script type="text/javascript" src="/javascripts/angular/1.4.0/angular.min.js"></script> 
     <script> 
      var create = function() { 
       $('#template').html('<button ng-click="changeName()">click me</button>') 
      } 
     </script> 
    </head> 
    <body ng-controller="myCtrl"> 
     <span>{{name}}</span> 
     <div id="template"></div> 
     <button onclick="create()">create</button> 

     <script> 
      var app = angular.module('myApp', []); 
      app.controller('myCtrl', function($scope) { 
       $scope.name = "John"; 
       $scope.changeName = function() { 
        $scope.name = "Jack"; 
        alert("success"); 
       } 
      }); 
     </script> 
    </body> 
</html> 

ich gegoogelt habe und die Winkel finden sollte das neu erstellte Element kompilieren, aber ich weiß nicht, wie in dieser Situation

Antwort

0

Sie ng verwenden sollten -repeat, um diese Schaltflächen zu erstellen, nicht jQuery.

Und dann würde eckig automatisch ng- an dieses neue Element binden.

+0

nennen den Tag andere Funktionen enthält, die ich brauche, gibt es keine müssen diese Funktionen erstellen wieder, so kann ich nicht ng-repeat erstellen eine neue Tabelle – fudy

1

Sie benötigen den $compile Service.

var app = angular.module('myApp', []); 
    app.controller('myCtrl', function($scope, $compile) { 

     $scope.create = function() { 
       $compile($('#template').html('<button ng-click="changeName()">click me</button>'))($scope); 
     } 
       $scope.name = "John"; 
       $scope.changeName = function() { 
        $scope.name = "Jack"; 
        alert("success"); 
       } 
    }); 

Und Ihre html ändern

<button ng-click="create()">create</button> 

Oder Sie können alle Körper zu bekommen und $compile, um es dann

var body = $angular.element(document).find('body'); 
$compile(body)($scope); 
+0

Wie ich bereits erwähnt, die Tabelle nur braucht json-Format Config, vielleicht nach jQuerys bereit verwenden () Ereignis, dass es die Tabelle erstellen wird, die Lösung, die Sie zur Verfügung gestellt haben, hilft nicht – fudy

Verwandte Themen