2016-05-07 5 views
0

$ scopeに変数がない理由を誰にも説明できますか?

入力に何かを入力すると、変数が表示されますが、コンソールを開くと、console.logで表示しようとする場所が変数$ scope.presearchで空になります。

はどのように我々はそれをすべて作品のイオンのディレクティブを取り除くんので、私は彼が何とか範囲に

<!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); 
    } 
}]); 

http://embed.plnkr.co/fh7WtJCs5S7R7iNXyfXM/

答えて

0

絶縁することを疑いますplunkrの例の問題は、コントローラを決して含めないということです。あなたが使用することを

<body ng-app="starter" ng-controller="LoginCtrl" animation="slide-left-right-ios7" style="padding:20px;"> 

かそれ以上で、たとえばこれを行うことができ$stateProvider

.config(function($stateProvider, $urlRouterProvider) { 
    $urlRouterProvider.otherwise('/login'); 

    $stateProvider 
     .state('login', { 
      url: '/login', 
      templateUrl: 'login.html', 
      controller: 'LoginCtrl', 
     }); 
}); 

EDIT ion-contentが彼自身$scope、したがって、2つの方法があることを

問題があり、データ - バインディングはもはや機能しません。 http://ionicframework.com/docs/api/directive/ionContent/を参照してください。あなたはion-content要素にあなたのコントローラを追加する場合、それは動作します:

<ion-content ng-controller="AppCtrl"> 
+0

これは私のコードではありません。 –

+0

間違いの申し訳ありませんが、なぜ別のページを開いたのかわかりません。私は自分の投稿を編集しました。 –

0

を対象にrefernceによる更新に基づいてwrksを結合2ウェイデータので、NG-モデルを割り当てることがプリミティブな値の代わりにオブジェクトを使用します。

<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> 

コントローラ

$scope.autoKeyUp = function() { 
    console.log($scope.model.presearch); 
} 
関連する問題