AngularJs Leere Daten mit $ Scope Controller

Ich habe seit Tagen damit zu kämpfen, ich kann nicht sehen, wo es falsch ist. Ich habe ein angularjs-Web mit Routing und Controllern eingerichtet, aber die Controller zeigen die Daten leer in den Ansichten an, aber in der Konsole kann ich die $ scope-Ausgabe mit den Corect-Daten durch eine console.log ($ scope) sehen . Hier ist der Code

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>

<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){ 
});

Ich weiß wirklich nicht, was ich 'nm mache falsch, ich folge vielen Routing-Tutorials, aber nichts.

In der Konsole gibt es keine Fehler nur die Ausgabe von $ scope.

Quelle

2016-10-31 fquirogam

Ein Problem ist Tippfehler in "singin" in Ihrer $ Scope Deklaration. – lintmouse

hast du meine lösung ausprobiert? –

Druckfehler in dieser Codezeile: verstehen

/Schtift>

Quelle

2016-10-31 17:13:28 PooThePanda

Sie einen neuen Wert für das $ scope-Parameter in Ihrer loginController Funktion

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

Sie müssen die Zuordnung, dass Danach verlieren Sie den Link zum tatsächlichen Umfang, den Angular verwendet. Angular hat einfach keine Möglichkeit zu wissen, welche Absichten Sie in Ihrem Controller haben. Hier

ist das Stück Code, den Trick tun:

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

Beachten Sie, dass es nur ein paar Eigenschaften für das Objekt $ scope fügt daher Angular perfekt können Änderungen von Ihrem Controller aus Ihrer Sicht reflektieren.

Quelle

2016-10-31 17:19:27

AngularJs Leere Daten mit $ Scope Controller

Antwort

Verwandte Themen