angularjs - Ionic / Angular JS - $scope issue : Cannot read property 'length' of undefined -
i can't use $scope in ionic, seems that's $scope not working.
let's see simple example : app.js :
angular.module('testapp', ['ionic','testctrl']) .run(function($ionicplatform) { $ionicplatform.ready(function() { if(window.cordova && window.cordova.plugins.keyboard) { cordova.plugins.keyboard.hidekeyboardaccessorybar(true); } if(window.statusbar) { statusbar.styledefault(); } }); }) .config(function($stateprovider, $urlrouterprovider) { $stateprovider .state('login', { url: "/login", templateurl: "views/login.html", controller : "login" }); $urlrouterprovider.otherwise('/login'); }); login.js :
angular.module('testctrl',[]) .controller('login', function($scope,$rootscope) { $scope.giveclass = function() { console.log($scope.email.length); } }); index.html :
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <script src="lib/ionic/js/ionic.bundle.js"></script> <script src="cordova.js"></script> <script src="js/app.js"></script> <script src="controllers/login.js"></script> </head> <body ng-app="testapp"> <ion-nav-view></ion-nav-view> </body> </html> login.html :
<ion-view> <ion-header-bar class="bar-calm"> <h1 class="title" ng-model="test">login</h1> </ion-header-bar> <ion-content> <form ng-submit="postlogin()" name="loginform"> <div class="list list-inset"> <label class="item item-input" ng-class="giveclass()"> <i class="icon icon-fixed-width ion-at placeholder-icon"></i> <input type="email" name="email" ng-model="email" placeholder="veuillez entrer votre adresse email" required/> </label> <label class="item item-input"> <i class="icon ion-key icon-fixed-width placeholder-icon"></i> <input type="password" name="password" ng-model="password" placeholder="veuillez entrer votre mot de passe" required/> </label> <div class="list"> <label class="item"> <button class="button button-block button-positive" type="submit">se connecter</button> </label> <label class="item"> <button class="button button-block button-royal" type="submit">s'enregistrer</button> </label> </div> </div> </form> </ion-content> </ion-view> when execute application console (console.log(...) in login.js) return
"cannot read property 'length' of undefined"
it not sure, plan set model property email. mean, 'email', pass ng-model in login.html:
<ion-view> ... // here expected model 'email' <input type="email" name="email" ng-model="email" placeholder="veuillez entrer votre adresse email" required/> ... in case, angular won't find - create that, on $scope. , scope first param not second here login.js:
.controller('login', function($scope,$rootscope) { $scope.giveclass = function() { // here can expect 'email' created // not on $rootscope // available on $scope console.log($rootscope.email.length); so, means:
- there no explict set of
$rootscope.email - nor of
$scope.email - because used
ng-model="email"can expect, angular create such property us, on$scope, not on$rootscope
and end with
cannot read property 'length' of undefined
if use $rootscope.email.length, or $scope.email.length. both of these should init first or checked if exist:
solution: way go initiate such property test (it not needed, know happening). , better, use model (and have dot - check more here: model in modal window in angularjs empty)
.controller('login', function($scope,$rootscope) { $scope.model = {}; // if possible - init it, // $scope.model.email= "init value"; $scope.giveclass = function() { // if need user init that, // have check if value set if($scope.model.email){ console.log($scope.email.length); } } and view
ng-model="model.email"
Comments
Post a Comment