Нг-клик не будет выполнен

Я хочу сделать мой тег div кликабельным, но не могу заставить его работать. Я работаю с Angular 1.5 и Ionic V1.

Когда пользователь входит в систему, я хочу, чтобы он / она были представлены с этим представлением:

<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>

Это представление появляется после того, как пользователь вошел в систему, но все ng-clickс не работают. Вот контроллер:

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

И внутри контроллера у меня есть эта функция:

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

}, 1000)

РЕДАКТИРОВАТЬ: Вот реализацияactiveBtn()

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

Я новичок в Angular, но с моим (небольшим) опытом я думаю, что проблема связана с контроллером, который не подключен должным образом. Но я могу ошибаться! Надеюсь, мы сможем решить эту проблему вместе, и я благодарен за всю поддержку, которую я могу получить.

Спасибо

Источник

3 ответа

Решение

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>

Я не вижу проблемы с этим, вы можете проверить и сравнить с вашими

Источник

Вам нужно разместить ng-controller="LoginCtrl" вне всего div, иначе $scope не получит контекст.

 <ion-modal-view ng-controller="LoginCtrl">
Источник 

angular.module('myApp', [])
  .controller('LoginCtrl', function($scope) {
    $scope.activeBtn = function(){
 
 alert("asdasd")
 }
  });
<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>

Работает отлично. Просто удалено ng-controller="LoginCtrl" рядом с ng-click="activeBtn"

Источник
Другие вопросы по тегам