Ng-click not work correctly


#1

hi fox,
i have a problem in a list-card item with an ng-click event.
her my code:

Html Template:

   < ion-list class="card">
        <ion-item ng-repeat="emergencyProceduresItem in emergencyProceduresList" class="item-icon-right"  type="item-text-wrap"  ng-click="openModal({{emergencyProceduresItem}})" href="#">
            <h3>
                {{emergencyProceduresItem.title}}<br/>
                <i class="icon ion-chevron-right icon-accessory"></i>
            </h3>
        </ion-item>
    </ion-list>

Controller:

    $scope.openModal = function (selectedEmergencyProcedure) {
    $scope.selectedItem = selectedEmergencyProcedure;
    if ($scope.modal) {
        $scope.modal.show();
    } else {
        $ionicModal.fromTemplateUrl('app/views/modal-emergencyProcedure.html', {
                scope: $scope
        }).then(function (modal) {
            $scope.modal = modal;
            $scope.modal.show();
        });
    }
    
};
$scope.closeModal = function () {
    $scope.modal.hide();
};

$scope.$on('$destroy', function () {
    $scope.modal.remove();
});

});

Now the my problem. By first Click on Item the Modal Dialog not open. When i go back and click again it run’s perfect.

Do you have an idear what is the Problem?

Greeting Sebastian


#2
  1. remove the href="#" part from ion-item
  2. you do not need to wrap the function values in {{ and }} --> pass the variable directly

#3

Hi bengtler,

first thank you for the quickly response.
I change for according your. is the follow code correctly?
Sorry i am noby in js and angular.js. The changes of your are have the same effects:-(

ion-item ng-repeat=“emergencyProceduresItem in emergencyProceduresList” class=“item-icon-right” type=“item-text-wrap” ng-click=“openModal(emergencyProceduresItem)” >
</ion-item…