Question

有人能够向我解释为什么$ scope没有变量吗？

如果在输入中输入内容，则可以看到显示变量，但是如果打开控制台，我尝试通过console.log显示的是$ scope.presearch为空的变量＆＃39; ＆＃39;

我们如何摆脱所有工作的离子指令，所以我怀疑他以某种方式隔离范围

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

Answer 1

你的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',
        });  
});

修改

问题是，ion-content有自己的$scope，因此双向数据绑定不再有效。见http://ionicframework.com/docs/api/directive/ionContent/。如果您将控制器添加到ion-content元素：
，它会起作用
<ion-content ng-controller="AppCtrl">

Answer 2

由于2路数据绑定wrks基于通过引用对象的更新，使用对象而不是原始值来分配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);
}

与Ionic的Angularjs看不到$ scope.variable

2 个答案: