Ionic View Template Not Being Updated When $scope Variable Is Updated In Controller

Question

I have an ionic app I'm testing the ability to check for fingerprint login. All this works, BUT when I check for whether a user has stored login credentials and get back the decrypted value, I want to SHOW a button that allows user to initiate fingerprint login.

The problem is, when I get back the success when gathering credentials from SecureStorage, I set a variable to show the button ($scope.canUseFingerprint) which is modeled to a button in the view using ng-if. BUT the button never shows up, UNLESS I type a single character into the email input again (there is no "change" function on the input).

I have inspected and it shows the variable is getting set to true, yet the button will not showup until a single character is entered into that email input.

Can someone take a look?

Here is my view:

<form name="loginForm" ng-submit="login(email, password)">
    <label>Email</label>
    <input type="text" ng-model="email" placeholder="typehere"></input>
    <label>Password</label>
    <input type="text" ng-model="password" placeholder="typehere"></input>
    <button type="submit">Test Login</button>
<!--Below Button Won't Showup-->
    <button type="button" ng-if="canUseFingerprint" ng-click="showFingerPrint()">Show Finger Print</button>


    <button type="button" ng-click="testShowFingerPrint()">Test Show Button</button>
    <button type="button" ng-click="clearKeys()">Clear All Keys</button>
</form>

Here is my controller:

$ionicPlatform.ready(function(){
    $scope.canUseFingerprint = false; //Initialized to false

var ss = new cordova.plugins.SecureStorage(
  function () { 
    console.log('Success');
    // $scope.allowFingerprintLogin = true;
    setTimeout(function(){
      checkForLoginCreds(); //Checks for login credentials
    },3000)

  },
  function (error) { 
    $scope.canUseFingerprint = false;
    addLockScreen();
    console.log('Error ' + error); 

  },
  'my_app');
var checkForLoginCreds = function(){

  ss.get(
    function (value) { 
      console.log('Success, got ' + value); 
      // This should activate the button, but does nothing. It DOES get set to true. Only after typing single character in input does the button show.
      $scope.canUseFingerprint = true; 
    },
    function (error) { console.log('Error ' + error); },
    'loginInfo');
}
})

The `setTimeout` function is not integrated with the AngularJS framework. Instead, use the [$timeout service](https://docs.angularjs.org/api/ng/service/$timeout). — georgeawg, Jun 20 '18 at 16:34

georgeawg · Accepted Answer · 2018-06-20T16:59:31.553

To convert ss.get from a callback-based service to a promise-based service, use the AngularJS $q Service:

function ssGetPromise(ss,key) {
    var deferred = $q.defer();   
    ss.get(
        function (value) { 
            console.log('Success, got ' + value); 
            deferred.resolve(value);
        },
        function (error) { 
            console.log('Error ' + error);
            deferred.reject(error);
        },
        key
    );
    return deferred.promise;
}

Usage:

ssGetPromise(ss,'loginInfo').then(function(value) {
    $scope.canUseFingerprint = true;
});

The $q Service creates promises that are integrated with the AngularJS Framework. Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc.

I was actually headed down this path when I got your answer. Perfect. Thanks a ton. — billy_comic, Jun 20 '18 at 19:38

Ionic View Template Not Being Updated When $scope Variable Is Updated In Controller

1 Answers1