I want to make my div tag clickable, but I can't get it to work. I am working with Angular 1.5 and Ionic V1.
When an user logs in I want he/she to be presented with this view:
<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>
That view is showing up after the user has logged in, but all the ng-click
s are not working. Here's the controller:
.controller('LoginCtrl', function ($scope, alerter, $localStorage, WizardHandler, datamapper, data, api, $state, authToken, $ionicModal, storage, endpointHandler, loadingHandler, $ionicPopup, $timeout) {
And inside the controller I have this function:
$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: Here's the implementation of the activeBtn()
$scope.isActive = false
$scope.activeBtn = function () {
console.log("clicked!");
$scope.isActive = !$scope.isActive
}
I am new to Angular, but with my (little) experience I think that the problem has something to do with the controller who is not connected properly. But I can be wrong! Hopefully we can solve this problem together, and I am grateful for all the support I can get.
Thanks
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>
I don't see problem with this,can you check and compare with your's