Ng-Klick wird nicht ausgeführt

Ich möchte mein div-Tag anklickbar machen, aber ich kann es nicht zum Funktionieren bringen. Ich arbeite mit Angular 1.5 und Ionic V1.Ng-Klick wird nicht ausgeführt

<ion-modal-view> 
<ion-header-bar> 
    <div class="buttons"> 
     <button class="button" ng-click="closeModal()"><i class="ion-chevron-left big-icon"></i></button> 
    </div> 
</ion-header-bar> 
<ion-content> 
    <div class="modal" style="background-color: #EDEEF1;" ng-controller="LoginCtrl"> 
     <div class="row row-white"> 
      <div class="col col-grey"> 
       <div class="divider20"></div> 
      <h4 style="margin-top:30px;">Martin Nordström</h4> 
      </div> 
     </div> 
     <div class="row row-white"> 
      <div class="col col-grey"> 
       <p style="color: #006E78; margin-bottom:40px;">990624****</p> 
      </div> 
     </div> 
     <div class="divider20"></div> 
     <div class="row row-white main-container"> 
      <div class="col col-grey"> 
       <p style="color:#006E78;">Vart vill du ta emot dina leveranser?</p> 
      </div> 
     </div> 

     <div class="info-box" ng-class="{'info-box-active':isActive}" ng-click="activeBtn()" ng-controller="LoginCtrl"> 
      <div class="box-row"> 
       <div class="header"> 
        <p class="leftText">IKANO Bostad</p> 
        <p class="rightText">Leveransrum</p> 
       </div> 
      </div> 

      <div class="box-row"> 
       <div class="fields"> 
        <p class="leftText">Folkungagatan 100</p> 
        <p class="rightText">10 kr/månad</p> 
       </div> 
      </div> 
     </div> 

     <div class="info-box"> 
      <div class="box-row"> 
       <div class="fields mixed"> 
        <p class="leftText">Lägg till en ny leveransbox</p> 
        <p class="rightText">0 kr/månad</p> 
       </div> 
      </div> 
     </div> 

     <div class="row row-white"> 
      <div class="col col-grey"> 
       <button style="border-radius:50px; width:200px; height:45px;" class="button" ng-click="closeModal()">Klar</button> 
      </div> 
     </div> 
     <div class="divider20"></div> 
    </div> 
</ion-content>

Diese Ansicht zeigt nach oben, nachdem der Benutzer angemeldet hat, aber die alle ng-click s nicht arbeiten:

Wenn ein Benutzer anmeldet Ich möchte er/sie mit dieser Ansicht dargestellt werden. Hier ist der Controller:

.controller('LoginCtrl', function ($scope, alerter, $localStorage, WizardHandler, datamapper, data, api, $state, authToken, $ionicModal, storage, endpointHandler, loadingHandler, $ionicPopup, $timeout) {

Und in der Steuerung Ich habe diese Funktion:

$timeout(function() { 
$ionicModal.fromTemplateUrl('templates/deliveryDestination.modal.html', { 
    scope: $scope.$scope, 
    animation: 'slide-in-up' 
}).then(function (modal) { 
    $scope.modal = modal 
    modal.show() 
})

}, 1000)

EDIT: Hier ist die Umsetzung der activeBtn()

$scope.isActive = false 
$scope.activeBtn = function() { 
    console.log("clicked!"); 
    $scope.isActive = !$scope.isActive 
}

Ich bin neu in Angular, aber w Mit meiner (kleinen) Erfahrung glaube ich, dass das Problem etwas mit dem Controller zu tun hat, der nicht richtig angeschlossen ist. Aber ich kann falsch liegen! Hoffentlich können wir dieses Problem gemeinsam lösen und ich bin dankbar für all die Unterstützung, die ich bekommen kann.

Dank

Quelle

2017-06-19 Martin Nordström

Gibt es irgendwelche Fehler in der Konsole? – abdoutelb

@Abdoutelb Es gibt leider keine Fehler. –

Hallo @Martin, kannst du es bitte mit * (klick) * anstatt * ng-klick * versuchen. Ich hoffe, es wird helfen. –

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

 

 
app.controller('LoginCtrl', function($scope) { 
 
$scope.isActive = false 
 
$scope.activeBtn = function() { 
 
    alert("clicked!"); 
 
    $scope.isActive = !$scope.isActive 
 
} 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<ion-header-bar> 
 
    <div class="buttons"> 
 
     <button class="button" ng-click="closeModal()"><i class="ion-chevron-left big-icon"></i></button> 
 
    </div> 
 
</ion-header-bar> 
 
<ion-content ng-app="app" ng-controller="LoginCtrl"> 
 
    <div class="modal" style="background-color: #EDEEF1;" > 
 
     <div class="row row-white"> 
 
      <div class="col col-grey"> 
 
       <div class="divider20"></div> 
 
      <h4 style="margin-top:30px;">Martin Nordström</h4> 
 
      </div> 
 
     </div> 
 
     <div class="row row-white"> 
 
      <div class="col col-grey"> 
 
       <p style="color: #006E78; margin-bottom:40px;">990624****</p> 
 
      </div> 
 
     </div> 
 
     <div class="divider20"></div> 
 
     <div class="row row-white main-container"> 
 
      <div class="col col-grey"> 
 
       <p style="color:#006E78;">Vart vill du ta emot dina leveranser?</p> 
 
      </div> 
 
     </div> 
 

 
     <div class="info-box" ng-class="{'info-box-active':isActive}" ng-click="activeBtn()"> 
 
      <div class="box-row"> 
 
       <div class="header"> 
 
        <p class="leftText">IKANO Bostad</p> 
 
        <p class="rightText">Leveransrum</p> 
 
       </div> 
 
      </div> 
 

 
      <div class="box-row"> 
 
       <div class="fields"> 
 
        <p class="leftText">Folkungagatan 100</p> 
 
        <p class="rightText">10 kr/månad</p> 
 
       </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="info-box"> 
 
      <div class="box-row"> 
 
       <div class="fields mixed"> 
 
        <p class="leftText">Lägg till en ny leveransbox</p> 
 
        <p class="rightText">0 kr/månad</p> 
 
       </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="row row-white"> 
 
      <div class="col col-grey"> 
 
       <button style="border-radius:50px; width:200px; height:45px;" class="button" ng-click="closeModal()">Klar</button> 
 
      </div> 
 
     </div> 
 
     <div class="divider20"></div> 
 
    </div> 
 
</ion-content>

ich mit diesem Problem nicht sehen, können Sie mit Ihrem des

Quelle

2017-06-19 11:21:43 abdoutelb

ahhhh Ich habe vergessen, es in den globalen Rahmen zu setzen! Silly mich –

@ MartinNordström Keine Sorge: D – abdoutelb

Sie benötigen die ng-controller="LoginCtrl" außerhalb aller div zu vergeben, andernfalls $ Umfang nicht den Kontext erhalten.

<ion-modal-view ng-controller="LoginCtrl">

Quelle

2017-06-19 10:42:02 Sajeetharan

Hallo! Ich habe es versucht, aber es hat nicht funktioniert. Danke, dass du dir Zeit genommen hast. –

angular.module('myApp', []) 
 
    .controller('LoginCtrl', function($scope) { 
 
    $scope.activeBtn = function(){ 
 
\t 
 
\t alert("asdasd") 
 
\t } 
 
    });

<html ng-app="myApp"> 
 

 
<head> 
 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.js"></script> 
 
    <script type="text/javascript" src="app.js"></script> 
 
    
 
    <title>Angular-Google-Charts Example</title> 
 
</head> 
 

 
<body> 
 
    <div class="modal" style="background-color: #EDEEF1;" ng-controller="LoginCtrl"> 
 
     <div class="row row-white"> 
 
      <div class="col col-grey"> 
 
       <div class="divider20"></div> 
 
      <h4 style="margin-top:30px;">Martin Nordström</h4> 
 
      </div> 
 
     </div> 
 
     <div class="row row-white"> 
 
      <div class="col col-grey"> 
 
       <p style="color: #006E78; margin-bottom:40px;">990624****</p> 
 
      </div> 
 
     </div> 
 
     <div class="divider20"></div> 
 
     <div class="row row-white main-container"> 
 
      <div class="col col-grey"> 
 
       <p style="color:#006E78;">Vart vill du ta emot dina leveranser?</p> 
 
      </div> 
 
     </div> 
 

 
     <div class="info-box" style="background-color:red;" ng-click="activeBtn()"> 
 
      <div class="box-row"> 
 
       <div class="header"> 
 
        <p class="leftText">IKANO Bostad</p> 
 
        <p class="rightText">Leveransrum</p> 
 
       </div> 
 
      </div> 
 

 
      <div class="box-row"> 
 
       <div class="fields"> 
 
        <p class="leftText">Folkungagatan 100</p> 
 
        <p class="rightText">10 kr/månad</p> 
 
       </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="info-box"> 
 
      <div class="box-row"> 
 
       <div class="fields mixed"> 
 
        <p class="leftText">Lägg till en ny leveransbox</p> 
 
        <p class="rightText">0 kr/månad</p> 
 
       </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="row row-white"> 
 
      <div class="col col-grey"> 
 
       <button style="border-radius:50px; width:200px; height:45px;" class="button" ng-click="closeModal()">Klar</button> 
 
      </div> 
 
     </div> 
 
     <div class="divider20"></div> 
 
    </div> 
 
</body> 
 

 
</html>

Arbeiten überprüfen und vergleichen perfekt fine.Just entfernt ng-controller="LoginCtrl" neben ng-click="activeBtn"

Quelle

2017-06-19 11:38:26

Ng-Klick wird nicht ausgeführt

Antwort

Verwandte Themen