How to hide a div from angular controller

Question

I have a div in my html like

<div class="row" ng-show="loginCtrl.showTouchID" >
    <div class="col-xs-12">
                    <button type="button" class="col-xs-12 btn btn-touch-id" data-ng-click="#">
                        TouchID Login
                    </button>
                </div>
            </div>

Now need to check in my controller contructor that whether the device support touch id if it is show the div or else not

  window.plugins.touchid.isAvailable(
            function (msg) {
                navigator.notification.alert('Touch id  supported: ' + msg);
                loginCtrl.showTouchID=true;


            }, function (msg) {
                navigator.notification.alert('Touch id not supported: ' + msg);
                loginCtrl.showTouchID=false;

            });

But this doesnt work well,Can anyone correct me

Below my login controller

  angular.module('heritage').controller('LoginCtrl', LoginCtrl);
    LoginCtrl.$inject = ['$scope','$rootScope', '$state', '$window', 'UserService', 'ServiceHelper', '$stateParams'];

    /**
     * Construct the controller.
     * @param $rootScope the root scope
     * @param $state the state object
     * @param $window the window object
     * @param UserService the user service
     * @returns the controller object
     */
    function LoginCtrl($scope,$rootScope, $state, $window, UserService, ServiceHelper, $stateParams) {

Make sure that this div is within the ng-controller element. Also, use $scope.loginCtrl.showTouchID instead of loginCtrl.showTouchID to access this variable in the view. Share the loginCtrl code also. It is not clear whether you are using $scope or not anywhere. — K K
– K K, Commented Nov 24, 2015 at 6:19
doesnt woked i have updated my question, the alerts are invoked but no change in div — Vaisakh N
– Vaisakh N, Commented Nov 24, 2015 at 6:28
Seems as u told above the issue with scope only i can hide/show div by setting loginCtrl.showTouchID=false; outside window.plugins.touchid.isAvailable methode but inside this not working — Vaisakh N
– Vaisakh N, Commented Nov 24, 2015 at 7:11
How could i access hideTouchId inside the window.plugins.touchid.isAvailable method? i tried using $scope.loginCtrl.hideTouchId=true; — Vaisakh N
– Vaisakh N, Commented Nov 24, 2015 at 7:15

michelem · Accepted Answer · 2015-11-24 07:15:55Z

2

Here is a working JSFiddle:

HTML:

<div ng-app="app" ng-controller="dummy">
    <div class="row" ng-show="loginCtrl.showTouchID">
        <div class="col-xs-12">
            <button type="button" class="col-xs-12 btn btn-touch-id" data-ng-click="setTouch('hello')">TouchID Login</button>
        </div>
        <p>{{loginCtrl.showTouchID}}</p>
    </div>
</div>

JS:

var app = angular.module("app", []);
app.controller('dummy', function ($scope) {
    $scope.loginCtrl = {showTouchID: true};

    $scope.setTouch = function (msg) {
        if ($scope.loginCtrl.showTouchID) {
            alert('Touch id not supported: ' + msg);
            $scope.loginCtrl.showTouchID = false;
        } else {
            alert('Touch id supported: ' + msg);
            $scope.loginCtrl.showTouchID = true;
        }
    }
});

answered Nov 24, 2015 at 7:15

michelem

14.6k5 gold badges55 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Vaisakh N Over a year ago

How could i access hideTouchId inside the window.plugins.touchid.isAvailable method? i tried using $scope.loginCtrl.hideTouchId=true; but doesnt work

michelem Over a year ago

inject $window in the controller and use it as $window.plugins.touchid.isAvailable

Vaisakh N Over a year ago

$window.plugins.touchid.isAvailable this method is working fine please look my controller i have inject $window in the controller and inside the alerts are fired also but $scope.loginCtrl.showTouchID = true; doesnt make any changes to my dom

Vaisakh N Over a year ago

But if i put loginCtrl.showTouchID outside the method for testing working seems that is not accessible inside that method how can i fix this

michelem Over a year ago

Did you define $scope.loginCtrl = {}?

|

Charlie · Accepted Answer · 2015-11-24 06:24:40Z

2

Pass the $scope to your function (if it is external) and change $scope variables there.

  window.plugins.touchid.isAvailable($scope
            function (msg) {
                navigator.notification.alert('Touch id  supported: ' + msg);
                $scope.showTouchID=true;


            }, function (msg) {
                navigator.notification.alert('Touch id not supported: ' + msg);
                $scope.showTouchID=false;

            });

answered Nov 24, 2015 at 6:24

Charlie

24k12 gold badges65 silver badges97 bronze badges

Collectives™ on Stack Overflow

How to hide a div from angular controller

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related