Anruf jQuery-Funktion von AngularJS-Controller

ich eine Schaltfläche unten, wenn auf geklickt zeigt ein kleines Popup wie AnmeldungAnruf jQuery-Funktion von AngularJS-Controller

<button id="element" type="button" onclick="ShowNotifications()" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Text inside popup">Notifications</button> 
<script type="text/javascript"> 
    function ShowNotifications() { 
     $('#element').popover('open'); 
    } 
</script>

Meine Absicht ist es, ohne klicken auf die Schaltfläche dieses Pop-up all paar Sekunden zu zeigen, aber von den AngularJS-Controller .

var showPop = function() { 
    //how can i call that jQuery function here ?? 
    $timeout(showPop, 1000); 
} 
$timeout(showPop, 1000);

Versuchte mit der unten Lösung

app.directive("showNotifications", ["$interval", function ($interval) { 
    return { 
     restrict: "A", 
     link: function(scope, elem, attrs) {   
      $interval(function() { 
       $(elem).popover("open"); 
       alert('hi'); 
      }, 1000); 
     } 
    }; 
}]);

gehörte auch die Skripte

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" /> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> 


<script src="js/app.js"></script> 
<script src="js/postsService.js"></script> 
<script src="js/directive.js"></script> 

<script src="js/controllers.js"></script>

mit der Richtlinie wie diese

<button id="element" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Friend request 1" **show-notifications**>Live Notifications</button>

Ich sehe einen Fehler "das Objekt hat keine Methode popover"

Quelle

2014-03-28 user804401

diese Art von Sachen verdient eine Richtlinie. Stellen Sie keine Logik in Ihren Controller. Es ist auch kein rekursiver Aufruf erforderlich, angular unterstützt jetzt $ interval. –

Richtlinien für DOM-Manipulation verwendet werden:

<button show-notifications>

und die Richtlinie

.directive("showNotifications", ["$interval", function($interval) { 
    return { 
     restrict: "A", 
     link: function(scope, elem, attrs) { 
      //On click 
      $(elem).click(function() { 
       $(this).popover("open"); 
      }); 

      //On interval 
      $interval(function() { 
       $(elem).popover("open"); 
      }, 1000); 
     } 
    } 
}]);

Quelle

2014-03-28 13:36:26 tymeJV

I upvoted dies, ich werde erweitern, indem Sie sagen, dass der Körper von 'link' sollte ein' $ interval (showPopup, 1000) ', was ist eigentlich, worum die Frage geht. –

@JoeMinichino - Aktualisiert, um auf Klick und Intervall zu zeigen – tymeJV

Ich probierte den Code und ich sehe bei Fehler "Das Objekt hat keine Methode Popover" Wenn ich eine Warnung setze kann ich die Warnung sehen. Ich habe auch alle Skripte enthalten, ich habe den Code geändert, pls schauen über – user804401

Statt eines $ platzieren Sie einfach den Schlüssel Wortwinkel

angular.element("#id").val()

Quelle

2015-03-22 11:56:10

ich möchte etwas wie dieses angular.element ("# btn") verwenden. Click (function (event) {alert ("hi");}); aber jqLite unterstützt keine Click-Methode .... was können die anderen Optionen sein. Bitte schlagen Sie vor. –

Es ist nicht notwendig, JQuery für diese Verwendung zu verwenden ng-click = "yourFunction()" wobei yourFunction() im Controller definiert ist wie
$ scope.yourFunction = function() { alert ("hi"); }; –

danke es funktionierte –

Die folgenden Schritte können befolgt werden,

var jq = $.noConflict();

erzeugen dann eine beliebige regelmäßigen Winkelmodul und Steuereinheit und eine Funktion in der Steuerung erstellen, die wir es für den rufenden jede jquery Funktion verwenden können, z.B. Ich möchte eine Klasse zu einem div-Element hinzufügen.

angular.module('myApp',[]).controller('hello',function($scope){ 
      $scope.name = 'Vikash'; 
      $scope.cities = ['Delhi','Bokaro','Bangalore']; 

      $scope.hide = function(){ 
       jq('#hideme').addClass('hidden'); 

      } 
     });

und wir werden einige regelmäßige HTML erstellen, um diese Methode mit dem Controller zu verwenden.

<body ng-controller="hello"> 
    <div class="container" id="hideme"> 
     Hello Dear 
    </div> 
    <button ng-click="hide()">Hide Hello</button> 
</body>

hier Jetzt können Sie sehen, dass wir über den Anruf addClass Methode aus der jQuery innerhalb der Funktion in der Steuerung und einen Teil des $ SCPE erklärt sind.

Quelle

2015-10-17 21:23:58

Das ist großartig.Sie können auch 'jQuery' anstelle von' noConflict' schreiben, so dass es so aussieht: 'jQuery ('# hidme'). AddClass ('hidden');' –

Anruf jQuery-Funktion von AngularJS-Controller

Antwort

Verwandte Themen