Question

我正在尝试将一些变量挂钩到AngularJS中的一个函数，虽然它们看起来是在前端，但是前端所做的更改不会转移到后端。

这是身体的相关部分：

<body ng-controller="main-controller">
  <div ng-show="show_login" ng-include="'/racket-web/view/login.html'">   
</body>

它包括什么

<table>
  <tr>
    Email <input ng-model="login_email"/> {{login_email}} <br>
    Pass <input type="password" ng-model="login_password"/> {{login_password}}<br>
    <button ng-click="exec_login()">Login</button>
  </tr>
</table>

这是我的控制器

app.controller('main-controller', function($scope) {

    $scope.login_email = 'abcd';
    $scope.login_password = 'defg';


    $scope.changeView = function(view) {
        $scope['show_login'] = false;
        // other views snipped        
        $scope['show_' + view] = true;
    }

    $scope.changeView('login'); 

    $scope.exec_login = function() {
        var email = $scope.login_email;
        var pass = $scope.login_password;
        alert('logging in ' + email + ' ' + pass);
    }

当我运行我的页面时，我会看到我的电子邮件并按预期传递输入，当我编辑它们时，输入旁边的调试值会相应更改。但是，当我单击按钮时，警报框仍然具有原始值。

如何获取函数内部获取的值以查看输入框中的最新版本？我知道我可以使用VanillaJS抓住它们，但我宁愿使用适当的Angular！

以下是我所看到的屏幕截图：

Answer 1

这很奇怪，我不知道为什么它不起作用，但我确实找到了一个有效的技巧，从长远来看可能是一个好主意。

因为这不是唯一的视图，所以我决定为视图的变量创建一个对象。无论如何，我已经隐含地使用view_variable。所以我让我的控制器看起来像这样：

app.controller('main-controller', function($scope) {

    $scope.login = {};

    $scope.login.email = 'abcd';
    $scope.login.password = 'defg';
    // snip

    $scope.exec_login = function() {
        var email = $scope.login.email;
        var pass = $scope.login.password;
        alert('logging in ' + email + ' ' + pass);
    }

更新我的表单以使用新变量login.email和login.password代替login_email和login_password，这使他们开始正常工作。

虽然我仍然想知道为什么顶级范围的变量没有正确更新，但我很高兴看到这种解决方法确实让我继续原型设计，并且说实话，正确确定我的变量将节省头痛在路上。

controller函数看到变量的旧版本

1 个答案: