Question

我已经忍受了好几天，我看不出哪里出错了。事情是我已经设置了一个带路由和控制器的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输出没有错误。

Answer 1

这些代码行中的印刷错误：

/ sctipt＆gt;

Answer 2

您正在为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可以完美地反映视图中控制器的变化。

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

2 个答案: