phonegap/ionic - click 函数内的 $scope 未更新

Question

我有一个简单的设置，我想单击一个按钮并从输入控件获取数据。问题是 click 函数内部的 $scope 变量保持与代码第一次运行时相同的值。当我在网络上创建小提琴时，一切都按计划进行。

HTML

<div ng-app>
    <div ng-controller="TodoCtrl">
        <input type="text" ng-model="authenticationCode">
        <br>
        <button class="button" ng-click="authenticate()">Authenticate</button>
        <br>
        <span>Auth info: {{authinfo}}</span>
        <br>
        <span>authenticationCode - {{authenticationCode}}</span>
    </div>
</div>

JavaScript

function TodoCtrl($scope) {
    $scope.authenticationCode = 'TESTER';
$scope.authenticate = function(){
        var t = $scope.authenticationCode;
    $scope.authinfo = t;
    };
}

Fiddle of the code working in web

当我在 PhoneGap 中运行它时

• 在输入框中使用“TESTER”加载屏幕
• 以“测试”作为“authenticationCode -”值的屏幕加载
• 将输入中的“TESTER”更改为“CHANGED”会将“authenticationCode -”更新为“CHANGED”
• 单击“验证”会将值“测试”作为“验证信息：”

我不知道为什么 $scope.authenticationCode 没有在 authentication 函数中更新它的值。我也不确定为什么这在网络中有效，而且我在使用 Ionic 的 PhoneGap 中遇到问题。

Answer 1

这个问题可能是因为TodoCtrl中使用了原语，请试试这个 -

HTML

<div ng-controller="TodoCtrl">
    <label class="item item-input">
        <input type="text" ng-model="input.authenticationCode">
    </label>
    <br>
    <button class="button" ng-click="authenticate()">Authenticate</button>
    <br><br>
    <span>Auth info: {{input.authInfo}}</span>
    <br>
    <span>authenticationCode - {{input.authenticationCode}}</span>
</div>

JavaScript

.controller('TodoCtrl', ['$scope', function($scope) {
    $scope.input = {
        authenticationCode: 'TESTER',
        authInfo: ''
    };

    $scope.authenticate = function() {
        $scope.input.authInfo = $scope.input.authenticationCode;
        console.log('authInfo: ' + $scope.input.authInfo);
    };
}]);

Here is a CodePen of the above