Angularjs with Ionic not see $scope.variable
Question
Does anyone would be able to explain to me why $scope does not have a variable?
If you enter something in the input it can be seen that the variable is displayed, but if you open a console, where I try to show by console.log is a variable with $scope.presearch is empty ''.
How do we get rid of the directives of the ionic it all works, so I suspect that he somehow insulates scope
<!DOCTYPE html>
<html ng-app="StarterApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Seed App</title>
<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/1.3.0/css/ionic.css">
<script src="http://code.ionicframework.com/1.3.0/js/ionic.js"></script>
<script src="http://code.ionicframework.com/1.3.0/js/angular/angular.js"></script>
<script src="http://code.ionicframework.com/1.3.0/js/angular/angular-animate.js"></script>
<script src="http://code.ionicframework.com/1.3.0/js/angular/angular-sanitize.js"></script>
<script src="http://code.ionicframework.com/1.3.0/js/angular-ui/angular-ui-router.js"></script>
<script src="http://code.ionicframework.com/1.3.0/js/ionic-angular.js"></script>
<script src="app.js"></script>
<!--<script src="controllers.js"></script>-->
</head>
<body ng-controller="AppCtrl">
<ion-side-menus>
<ion-side-menu side="left">
<ion-content>
<div class="mobile-menu sidebar-left">
Menu
</div>
</ion-content>
</ion-side-menu>
<ion-side-menu-content>
<ion-content overflow-scroll='true'>
<input type="text" style="border:1px solid black;" ng-model="presearch" ng-keyup="autoKeyUp()">
<h1><b>{{presearch}}</b></h1>
</ion-content>
</ion-side-menu-content>
</ion-side-menus>
</body>
</html>
app.js
var app = angular.module('StarterApp', ['ionic']);
app.controller('AppCtrl',['$rootScope','$scope', function($rootScope,$scope){
$scope.autoKeyUp = function() {
console.log($scope.presearch);
}
}]);
2 answers
solution1
0 2016-05-07 20:26:52
The problem in your plunkr example is, that you never include your controller. you can do this for example with
<body ng-app="starter" ng-controller="LoginCtrl" animation="slide-left-right-ios7" style="padding:20px;">
Or better to use $stateProvider
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'login.html',
controller: 'LoginCtrl',
});
});
EDIT
The problem is, that ion-content has his own $scope and therefore the 2 way data-binding doesn't work anymore. see http://ionicframework.com/docs/api/directive/ionContent/ . It works if you add your controller to the ion-content element:
<ion-content ng-controller="AppCtrl">
solution2
0 2016-05-07 22:15:18
Since the 2 way data binding wrks based on update by refernce to an object, use an object instead of primitive value to assign the ng-model.
<ion-content overflow-scroll='true'>
<input type="text" style="border:1px solid black;" ng-model="model.presearch" ng-keyup="autoKeyUp()">
<h1><b>{{model.presearch}}</b></h1>
</ion-content>
Controller
$scope.autoKeyUp = function() {
console.log($scope.model.presearch);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.