Шаблон Ionic View не обновляется, когда переменная $scope обновляется в контроллере

У меня есть ионное приложение, в котором я тестирую возможность проверки входа по отпечатку пальца. Все это работает, НО когда я проверяю, сохранил ли пользователь учетные данные для входа и возвращает расшифрованное значение, я хочу ПОКАЗАТЬ кнопку, которая позволяет пользователю инициировать вход в систему по отпечатку пальца.

Проблема в том, что когда я получаю ответ об успешном сборе учетных данных из SecureStorage, я устанавливаю переменную для отображения кнопки ($scope.canUseFingerprint), которая моделируется как кнопка в представлении с использованием ng-if. НО кнопка никогда не появляется, ЕСЛИ Я снова не ввожу один символ в поле ввода электронной почты (на вводе нет функции «изменить»).

Я проверил, и он показывает, что для переменной устанавливается значение true, но кнопка не будет отображаться, пока в этот ввод электронной почты не будет введен один символ.

Может кто-нибудь посмотреть?

Вот мой взгляд:

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

Вот мой контроллер:

$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');
}
})

cordova angularjs ionic-v1
person billy_comic    schedule 20.06.2018    source источник
comment
Функция setTimeout не интегрирована с фреймворком AngularJS. Вместо этого используйте службу $timeout.   -  person georgeawg    schedule 20.06.2018

Ответы (1)


arrow_upward
1
arrow_downward

Чтобы преобразовать ss.get из службы на основе обратного вызова в службу на основе обещаний, используйте AngularJS. Служба $q:

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

Применение:

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

$q Service создает промисы, интегрированные с AngularJS Framework. Только операции, которые применяются в контексте выполнения AngularJS, получат выгоду от привязки данных AngularJS, обработки исключений, наблюдения за свойствами и т. д.

person georgeawg    schedule 20.06.2018
comment
Я действительно шел по этому пути, когда получил ваш ответ. Идеальный. Благодаря тонну. - person billy_comic; 20.06.2018