使用$scope控制器来清空数据

AngularJs Empty data with $scope controller

本文关键字：清空 数据 控制器 scope 使用      更新时间：2023-09-26

我已经为此挣扎了好几天了，我看不出哪里错了。事情是我已经设置了一个带有路由和控制器的angularjs web，但控制器在视图中显示的数据是空的，但在控制台中，我可以通过console.log($scope)看到$scope输出的正确数据。下面是代码

index . html 

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-md5/angular-md5.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
/script><sctipt src="http://getbootstrap.com/dist/js/bootstrap.min.js">
/sctipt><script src="js/main.js"></script>
</head>
<body ng-app='app'>
<div ng-view></div>
</body>
</html>

login.html 

<div class="container">
<div class="row">
    <div class="col-md-12">
        <div class="wrap">
            <p class="form-title">
                {{signin}}</p>
            <form class="login">
            <input type="text" ng-placeholder="{{user}}" required/>
            <input type="password" ng-placeholder="{{password}}" required/>
            <input type="submit" value="{{signin}}" class="btn btn-success btn-sm" />
            <div class="remember-forgot">
                <div class="row">
                    <div class="col-md-5">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" />
                                {{rememberme}}
                            </label>
                        </div>
                    </div>
                    <div class="col-md-7 forgot-pass-content">
                        <a href="javascription:void(0)" class="forgot-pass">{{forgotpassword}}}</a>
                    </div>
                </div>
            </div>
            </form>
        </div>
    </div>
</div>

main.js 

var app=angular.module('app',['ngRoute']);
app.config(['$locationProvider','$routeProvider',function ($locationProvider,$routeProvider){
$routeProvider.
    when('/login',{
        templateUrl:'html/login.html',
        controller:'loginController'
    }).
    when('/home',{
        templateUrl:'html/home.html',
        controller:'homeController'
    }).
    otherwise({
        redirectTo:'/login'
    });
}]);
app.run(function($rootScope){
$rootScope.urlapi='http://freecalendar.desirnet.com/api/api.php';
});
app.controller('loginController',function($scope,$rootScope,$location){
$scope={
    'singin':'Iniciar sesión',
    'user':'Usuario',
    'password':'Contraseña',
    'rememberme':'Recuérdame',
    'forgotpassword':'Recordar contraseña'
};
console.log($scope);
$scope.login=function(){
    var data=$.param({
        'user':$scope.txtuser,
        'password':$scope.txtpassword
    });
    $http.post($rootScope.urlapi,data)
    .then(function(response){
        response=response.data;
        console.log(response);
        if(response.error!=undefined){
            $scope.errorlogin="El usuario y/o contraseña no son correctos";
        } else {
            $location.path('/home')
        }
    });
}
});
app.controller('homeController',function($scope,$rootScope,$location){
});

我真的不知道我做错了什么，我学了很多路由教程，但是什么都没有。

在控制台中没有错误，只有$scope输出

下列代码行的排版错误:

/sctipt>

你正在给loginController函数中的$scope参数赋一个新值

$scope={
    'singin':'Iniciar sesión',
    'user':'Usuario',
    'password':'Contraseña',
    'rememberme':'Recuérdame',
    'forgotpassword':'Recordar contraseña'
};

你需要明白，在那之后，你就失去了指向Angular正在使用的实际作用域的链接。Angular根本无法知道你在控制器中的意图。

下面这段代码可以实现这个功能:

Object.assign($scope, {
    'singin':'Iniciar sesión',
    'user':'Usuario',
    'password':'Contraseña',
    'rememberme':'Recuérdame',
    'forgotpassword':'Recordar contraseña'
});

请注意，它只是在$scope对象中添加了一些属性，因此Angular可以完美地将控制器的更改反映到视图中。

相关文章：