Question

我正在开发一个带有离子的meteo移动应用程序，而我无法让ng-click ='getfp（item）'在第一个离子项标签中工作。它应该在PrevisionCTRL中调用getfp函数，但是console.log甚至不打印任何内容。

我知道使用按钮有一些关于这个问题的stackoverflow，我尝试了一些没有成功的问题。所以我不确定问题的根源是否相同。

任何帮助将不胜感激

查看html：

<ion-view>
  <ion-nav-title>Météo: {{city}}, France</ion-nav-title>
  <!-- if city in db-->
  <ion-content>

      <ion-item ng-if="cityDefined"  ng-repeat="item in prevision.list" class="row" ng-class="{row_active: $index==0}" ng-click='getfp(item)'>

        <div class="temperature">{{Math.round(item.temp.day)}}°C</div>
        <div class="date" >
          <strong>{{item.dt*1000 | date:'EEE'}}</strong>
          {{item.dt*1000 | date:'dd/MM'}}
        </div>
        <div class="wind">Vent: {{item.speed}} Km/h </div>
        <i class="icon-{{item.weather[0].main.toLowerCase() }}"></i>

      </ion-item>

  </ion-content> <!--city not in db-->
  <ion-content >
    <div ng-if="!cityDefined" class="padding cityUndefinded" >
      <p>Désolé, le nom de la ville entrée n'est pas dans la banque de données.</p>

      <p>Veuillez entrer une autre ville, puis faire une selection dans la liste présentant les villes disponibles.</p>
    </div>
  </ion-content>
</ion-view>

控制器

angular.module('starter.controllers',[])

  .controller('PrevisionCtrl',['$scope','$state','$ionicLoading','$http','$stateParams',function ($scope,$state,$ionicLoading,$http,$stateParams){
    // variable pour verifier si la ville existe
    $scope.cityDefined = false;

    console.log("$scope.cityDefined",$scope.cityDefined);
    console.log("$stateParams.city",$stateParams.city);

    //url d'open weather pour les infos quotidiennes dans laquelle on passe la ville en param
    url = "http://api.openweathermap.org/data/2.5/forecast/daily?q=" + $stateParams.city + "&mode=json&units=metric&cnt=10&APPID=f5fbf26393c3d7c7c8f87dd6dc22b14b";

    // on affiche le chargement le temps de charger les prévisions
    $ionicLoading.show({
      template: 'Chargement...'
    });

    //on fait un http sur l'url d'openweathermap.org
    $http.get(url)
      .then(
        function(res){
          $scope.prevision = res.data;
          // on verifie que la ville cherchée existe en comparant la ville de la requete et de la reponse
          if($scope.prevision.city.name == $stateParams.city){
            console.log("$scope.prevision.city.name == $stateParams.city",$scope.prevision.city.name == $stateParams.city);
            $scope.city = $stateParams.city;
            $scope.cityDefined = true;
            console.log($scope.prevision.city.name);
            console.log("$scope.cityDefined",$scope.cityDefined);
            console.log("$stateParams.city",$stateParams.city);

          }
          $ionicLoading.hide();
        },
        function(res){
          $ionicLoading.hide();
          console.log(res.message);
        }
      );

    $scope.Math = Math;

    $scope.getfp = function(row){
      // on appelle la vue prévision en passant la ville en paramètre
      $state.go('PrevisionFull', {row: row, city:$stateParams.city});
      console.log(row);
    }

  }])

  //////////////////////////////////////////////////////////////////////////

  .controller('PrevisionFullCtrl',['$scope','$state','$stateParams',function ($scope,$state,$stateParams){

    $scope.row = $stateParams.row;



  }]);

Answer 1

如果它可以帮助其他人，似乎我能够在将其修改为最终后才能使其工作：

查看HTML

<ion-view>
  <ion-nav-title>Météo: {{city}}, France</ion-nav-title>
  <!-- if city in db-->
  <ion-content>


    <ion-item ng-if="cityDefined"  ng-repeat="item in prevision.list" class="row" ng-class="{row_active: $index==0}" ng-click='getfp(item)'>

      <div class="temperature">{{Math.round(item.temp.day)}}°C</div>
      <div class="date" >
        <strong>{{item.dt*1000 | date:'EEE'}}</strong>
        {{item.dt*1000 | date:'dd/MM'}}
      </div>
      <div class="wind">Vent: {{item.speed}} Km/h </div>
      <i class="icon-{{item.weather[0].main.toLowerCase() }}"></i>

    </ion-item>
  </ion-content>
</ion-view>

控制器

  .controller('PrevisionCtrl',['$scope','$state','$ionicLoading','$http','$stateParams',function ($scope,$state,$ionicLoading,$http,$stateParams){
    // variable pour verifier si la ville existe
    $scope.cityDefined = false;

    console.log("$scope.cityDefined",$scope.cityDefined);
    console.log("$stateParams.city",$stateParams.city);

    //url d'open weather pour les infos quotidiennes dans laquelle on passe la ville en param
    url = "http://api.openweathermap.org/data/2.5/forecast/daily?q=" + $stateParams.city + "&mode=json&units=metric&cnt=10&APPID=f5fbf26393c3d7c7c8f87dd6dc22b14b";

    // on affiche le chargement le temps de charger les prévisions
    $ionicLoading.show({
      template: 'Chargement...'
    });

    //on fait un http sur l'url d'openweathermap.org
    $http.get(url)
      .then(
        function(res){
          $scope.prevision = res.data;
          // on verifie que la ville cherchée existe en comparant la ville de la requete et de la reponse
          if($scope.prevision.city.name == $stateParams.city){
            console.log("$scope.prevision.city.name == $stateParams.city",$scope.prevision.city.name == $stateParams.city);
            $scope.city = $stateParams.city;
            $scope.cityDefined = true;
            console.log($scope.prevision.city.name);
            console.log("$scope.cityDefined",$scope.cityDefined);
            console.log("$stateParams.city",$stateParams.city);

          }
          $ionicLoading.hide();
        },
        function(res){
          $ionicLoading.hide();
          console.log(res.message);
        }
      );

    $scope.Math = Math;

    $scope.getfp = function(item){
      // on appelle la vue prévision en passant la ville en paramètre
      $state.go('PrevisionFull', {row: item, city:$stateParams.city});
      console.log(item);
    }

  }])

Answer 2

我在某个时间遇到同样的问题。从那以后，我没有在同一个元素上使用ng-click和ng-if。请在ng-if上尝试不ion-item。如果有效，请将内容从ion-item打包到div并在其上添加ng-click。

见下文：

<ion-item ng-if="cityDefined"  ng-repeat="item in prevision.list" class="row" ng-class="{row_active: $index==0}">
<div ng-click='getfp(item)'>
  <div class="temperature">{{Math.round(item.temp.day)}}°C</div>
  <div class="date" >
    <strong>{{item.dt*1000 | date:'EEE'}}</strong>
    {{item.dt*1000 | date:'dd/MM'}}
  </div>
  <div class="wind">Vent: {{item.speed}} Km/h </div>
  <i class="icon-{{item.weather[0].main.toLowerCase() }}"></i>
</div>

我希望能帮助您解决上述问题。

ng-click在离子离子项标签中不起作用

2 个答案: