在控制器中更新 $scope 变量时，离子视图模板未更新

Question

我有一个离子应用程序，我正在测试检查指纹登录的能力。所有这一切都有效，但是当我检查用户是否已存储登录凭据并取回解密值时，我想显示一个允许用户启动指纹登录的按钮。

问题是，当我从 SecureStorage 收集凭据时获得成功时，我设置了一个变量来显示按钮 ($scope.canUseFingerprint)，该按钮被建模为视图中的按钮使用ng-if。但是按钮永远不会出现，除非我再次在电子邮件输入中键入一个字符（输入上没有 "change" 功能）。

我已经检查过，它显示变量已设置为 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');
}
})

Answer 1

要将 ss.get 从基于回调的服务转换为基于承诺的服务，请使用 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;
}

用法：

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

$q Service 创建与 AngularJS 框架集成的承诺。只有在 AngularJS 执行上下文中应用的操作才能受益于 AngularJS 数据绑定、异常处理、属性监视等

在控制器中更新 $scope 变量时，离子视图模板未更新

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

angularjs

cordova

ionic-v1