在 Angular 1.6 中使用 `this` 上下文查看不刷新

Posted 2023-02-22

【中文标题】在 Angular 1.6 中使用 `this` 上下文查看不刷新

【英文标题】：View not refreshing using `this` context in Angular 1.6

【发布时间】：2018-01-06 04:26:17

【问题描述】：

我是 Angular 新手，在检查最佳实践时使用“this”而不是“scope”。我的初始值得到反映，但函数调用后的值变化没有反映在视图上。

这是我的代码：

我的 HTML 视图

    <div class="container" ng-controller="LoginCtrl as loginCtrl">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 title">Login</div>
        </div>
        <div class="row">
            <div class="col-lg-2 col-md-3 col-sm-12"><label>Email</label></div>
            <div class="col-lg-6 col-md-6 col-sm-12">
                <input type="text" name="email" type="email" ng-model="loginCtrl.email"/>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-2 col-md-3 col-sm-12"><label>Password</label></div>
            <div class="col-lg-6 col-md-6 col-sm-12">
                <input type="password" name="password" ng-model="loginCtrl.password"/>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-2 col-md-3 col-sm-12">&nbsp;</div>
            <div class="col-lg-2 col-md-4 col-sm-12">
                <button class="btn btn-default" type="button" ng-click="loginCtrl.checkLogin()">Login</button>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-12">
                <span>!loginCtrl.message!</span>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-2 col-md-3 col-sm-12">&nbsp;</div>
            <div class="col-lg-2 col-md-4 col-sm-12">
                <a href="$root/forgot-password">Forgot password</a>
            </div>
        </div>
    </div>

我的 main.js

angular.module('app', [], function($interpolateProvider) 
$interpolateProvider.startSymbol('!');
$interpolateProvider.endSymbol('!');
);

我的控制器

angular.module('app').controller('LoginCtrl', ['$window', 'LoginService', 'CSRF_TOKEN', function($window, LoginService, CSRF_TOKEN) 
this.message = 'Initial message';
this.email = '';
this.password = '';

this.checkLogin = function() 
    var data = 
        email: this.email,
        password: this.password,
        _token: CSRF_TOKEN
    ;

    LoginService.checkLogin(data)
        .then(function(result) 
            if (result.success)
                $window.location.replace('user-section');
            else
                this.message = result.message;
        );

]);

请假设控制台没有错误并且一切正常。 初始消息正在打印，但 this.message = result.message 或 this.message = 'Some result'; 没有得到反映。

【参考方案1】：

我认为问题出在您的 checkLogin 函数上。

在函数中，您将this.message 设置为在另一个函数中 中的某个字符串。这个新功能还创建了一个新范围。因此，每当您在新函数中使用关键字this 时，它指的是新函数的范围，而不是控制器的范围。

要解决此问题，您可以在 checkLogin 函数之外添加另一个变量 var self = this 并将其用作控制器的参考：

angular.module('app').controller('LoginCtrl', ['$window', 'LoginService', 'CSRF_TOKEN', function($window, LoginService, CSRF_TOKEN) 
this.message = 'Initial message';
this.email = '';
this.password = '';

var self = this;

this.checkLogin = function() 
    var data = 
        email: this.email,
        password: this.password,
        _token: CSRF_TOKEN
    ;

    LoginService.checkLogin(data)
        .then(function(result) 
            if (result.success)
                $window.location.replace('user-section');
            else
                self.message = result.message;
        );

]);

在新函数内部，您现在可以调用 self.message，因为 self 仍然引用您的控制器，所以这将更新您控制器中的消息。

【参考方案2】：

可能LoginService 使用的是本机承诺而不是$q，因此 Angular 不知道您的异步更改。获取数据时，您需要运行摘要循环。试试这个：

LoginService.checkLogin(data)
    .then((result) => 
        if (result.success)
            $window.location.replace('user-section');
        else
            $scope.apply(function () 
                this.message = result.message;
            );
       );

注意箭头功能，以免丢失对范围的引用。