jQuery Schaltflächen geklickt

Ich habe versucht, jQuery mit angularjs so eine einfache App gemacht enthält index.html und first.html, second.html, third.html, viertel.html jedes der Unterseiten enthält eine Schaltfläche, wenn Sie darauf klicken Hintergrundfarbe ändert sich.jQuery Schaltflächen geklickt

Code: Ich kodierte die vierte leicht anders, indem ich die Funktion an den $ scope anknüpfte, während die anderen drei nur eine jQuery-Funktion in ihren Controllern verwenden.

Ansicht: alle Tasten funktionieren gut, aber die vierte auf der vierten Seite muss zweimal angeklickt werden, um zu arbeiten.

Hinweis: Keine Fehler in der Konsole.

Hier ist meine Repo auf GitHub: https://github.com/shireefkhatab/ng-query Und die Website Ansicht http://shireefkhatab.github.io/ng-query

Vielen Dank im Voraus.

Quelle

2016-06-15 shireef khatab

entsprechenden Code Beitrag selbst in Frage. Links zu Repos ändern sich, wodurch die Frage in Zukunft unbrauchbar wird. Außerdem sollten wir nicht von der Website gehen müssen, um Ihren Code zu finden. Fragen sollten in sich geschlossen sein und Links nur für die Unterstützung dessen verwenden, was in der Quest selbst ist. – charlietfl

Auf der vierten Seite haben Sie die Funktion an Ihre ng-click gebunden und Sie müssen auf klicken, um Click Event über jQuery abonniert zu haben.

Lassen Sie das

$('body').css('backgroundColor','lightgray');

im Körper forthButton Funktion.

Quelle

2016-06-15 23:07:21

Das ist was ich mit den Seiten 1,2,3 mache, aber hier wollte ich es an den $ scope anhängen .. nur um es zu versuchen. –

Vielen Dank für Ihren Rat ,, –

Ich habe die Antwort von zwei Mitgliedern hier unten .. Vielen Dank an euch alle –

sollte diese bearbeiten helfen:

app.controller('fourthController',function($scope){ 
     $scope.item = "page 4"; 
     $scope.fourthButton = function(){ 

      $('body').css('backgroundColor','lightgray'); 

     }; 
    });

Der Grund, warum Sie zweimal klicken müssen, ist der erste Klick die $ scope.fourthButton() -Methode löst das jquery und einrichtet (das alles, was Sie wirklich brauchen, ist) " Klicken Sie auf "Listener", was unnötig ist. ng-click kümmert sich um den "Klick" -Port für Sie. Also würde ich entweder die jQuery-Methode der Klick-Triggerung oder die "Angular" -Methode verwenden.

Quelle

2016-06-15 23:10:14

Vielen Dank .. wirklich hilfreich. –

ok .. Wenn ich versuche, die # von der URL zu entfernen, funktioniert es, aber wenn ich die Seite aktualisiere, funktioniert es nicht, ich verstehe den Grund, weil die URL vom Skript abhängt, das beim Aktualisieren nicht verfügbar sein wird. aber wie kann ich das lösen? ich benutze aber auch versucht, die web.config die urls neu schreiben, aber nicht wissen, wo es hinzuzufügen. –

Sie müssen zweimal klicken, weil Sie den jQuery-Click-Handler mit ng-click hinzufügen und der zweite Klick löst den angefügten Click-Handler aus.

Zunächst einmal versuchen Sie zu vermeiden, jQuery überhaupt zu verwenden. Bei AngularJs wird es meistens nicht benötigt. Wenn Sie es wirklich brauchen, verwenden Sie es nur in Anweisungen.

So ist die Winkel Art und Weise den Stil zu ändern ist wie folgt:

app.controller('fourthController',function($scope){ 
    $scope.item = "page 4"; 
    $scope.fourthButton = function(){ 
     $scope.myStyle = {'backgroundColor': 'lightgray'}; 
    }; 
});

Und in der HTML-Markup:

<body ng-style="myStyle"> 
.... 
</body>

haben Sie einen Blick auf die Demo unten.

var app = angular.module('app', []); 
 
app.controller('fourthController', function($scope) { 
 
    $scope.item = "page 4"; 
 
    $scope.fourthButton = function() { 
 
    $scope.myStyle = {'background-color': 'lightgray'}; 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<html ng-app="app"> 
 

 
<body ng-style="myStyle" ng-controller="fourthController"> 
 
    <button ng-click="fourthButton()">fourth</button> 
 
{{myStyle}} 
 
    </body> 
 

 
</html>

Quelle

2016-06-15 23:14:50 AWolf

Vielen Dank für die hilesul Antwort –

ok .. Wenn ich versuche, die # aus der URL zu entfernen, funktioniert es, aber wenn ich die Seite aktualisieren funktioniert es nicht, ich verstehe den Grund, wie die URL hängt von dem Skript, die nicht verfügbar auf aktualisieren . aber wie kann ich das lösen? ich benutze aber auch versucht, die web.config die urls neu schreiben, aber nicht wissen, wo es hinzuzufügen. –

Welchen Webserver verwenden Sie für Ihre App? Es sollte immer der 'index.html' dienen. Mit ExpressJs und Node können Sie alle Routen abfangen, die immer Ihre Indexdatei zurückgeben. Etwas wie ['serve'] (https://www.npmjs.com/package/serve) sollte auch als Entwicklungsserver funktionieren oder du könntest [' webpack-dev-server'] verwenden (https://github.com/ Preboot/Winkel-Webpack). – AWolf

jQuery Schaltflächen geklickt

Antwort

Verwandte Themen