我无法在 ionic 中使用$scope，似乎$scope不起作用。
让我们看一个非常简单的例子: 应用程序.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');
});
登录.js:
angular.module('TestCtrl',[])
.controller('login', function($scope,$rootScope) {
$scope.giveClass = function() {
console.log($scope.email.length);
}
});
索引.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>
登录.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>
当我执行此应用程序控制台时(login.js 中的 console.log(...))返回
"Cannot read property 'length' of undefined"
最佳答案
不确定您计划在哪里设置模型属性email。我的意思是，您在 Login.html 中传递给 ng-model 的“电子邮件”:
<ion-view>
...
// here is expected model 'email'
<input type="email" name="email" ng-model="email"
placeholder="Veuillez entrer votre adresse email" required/>
...
万一，该 Angular 找不到它 - 它会创建它，但在 $scope 上。范围将是第一个参数，而不是这里的第二个参数Login.js:
.controller('login', function($scope,$rootScope) {
$scope.giveClass = function() {
// here we can expect 'email' to be created for us
// but not on $rootScope
// it will be available on $scope
console.log($rootScope.email.length);
所以，这一切意味着:
- 没有明确的
$rootScope.email集 - 也不属于
$scope.email - 因为我们使用了
ng-model="email"，我们可以预期，Angular 将为我们创建这样的属性，但在$scope上，而不是在上$rootScope
最终的结果就是
Cannot read property 'length' of undefined
如果我们使用$rootScope.email.length，甚至$scope.email.length。这两个都应该首先初始化或检查它们是否存在:
解决方案:解决方案是启动此类属性测试(这不是必需的，但我们知道发生了什么)。更好的是，使用一些模型(并且有一个点 - 在此处查看更多信息: Model in a modal window in angularjs is empty )
.controller('login', function($scope,$rootScope) {
$scope.Model = {};
// if possible - init it,
// $scope.Model.email= "init value";
$scope.giveClass = function() {
// if we need user to init that,
// we have to check if that value was set
if($scope.Model.email){
console.log($scope.email.length);
}
}
和 View
ng-model="Model.email"
关于angularjs - Ionic/Angular JS - $scope 问题 : Cannot read property 'length' of undefined，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29319225/