双向绑定，范围变量未定义(Two way binding, scope variable undef

我正在写与OnesnUI和AngularJS一个应用程序，采用NG-模型得到的DOM元素的输入。

这里是我的代码

<body>
  <ons-screen>
      <ons-page class="center" ng-controller="page1Ctrl">
    <ons-navigator title="Page 1">
        <div class="center">
          <h1>Pharmy</h1>
            <ons-text-input ng-model="medName" placeholder="Enter Medicine Name" style="display:block; width:100%;" id="test"></ons-text-input>
            <div style="position:relative">
                <ons-text-input ng-model="location" placeholder="Enter Location" style="display:block; width:100%; margin-top:10px;"></ons-text-input>
                <ons-icon icon="search" style="position:absolute;right:10px;top:5px;"></ons-icon>
            </div>
            <ons-button ng-click="goToPage2()"
                        style="width:10%; margin-top:10px;">
                <ons-icon icon="search"></ons-icon>
            </ons-button>
        </div>
    </ons-navigator>
          </ons-page>
  </ons-screen>
</body>

并且正在尝试从输入文本框中的值，还有我的app.js ：

    (function () {
        'use strict';
        var app = angular.module('myApp', ['onsen.directives']);
        app.controller('page1Ctrl',['$scope','pageService',function($scope,pageService){
            $scope.$watch('medName',function(newVlaue){
                console.log('Watching YOU !' + newVlaue);
            });
            console.log($scope.medName);
            $scope.goToPage2 = function(){
                console.log('Going to page2 !');
                console.log($scope.medName);
                pageService.start($scope.medName);
                $scope.ons.navigator.pushPage("page2.html");
            }
        }]);
    })();

为什么medName印刷值undefined ？

Answer 1:

如果非要说出在角一个适当的疼痛，这将是范围继承。

如果你让我们说$scope.foo = "hello"是控制器，然后创建该控制器的儿童范围，那么你尝试分配一个新值foo那会克里特新 foo新范围内。你父控制器将永远不会看到的变化。

在你的问题，你是不是创建一个新的范围，但OnsenUI正在这样做也许对ons-screen或ons-navigator 。然后你输入一个新的子范围内，如果尝试分配newMed它要对儿童的范围这么做。

该规则始终是有对象，被称为dot rule （查看这里）。

所以，如果你不想再有这样的问题，总是不喜欢我告诉你的评论，创建类似$scope.meds = {}然后ng-model="meds.newMed" ，因为这样一来，它会搜索meds第一对父母，如果它发现它，它会使用它，这是你想要做什么。

这是错误的做它的第一个例子： http://plnkr.co/edit/IJZOa1pXtcQePiEVMzjZ?p=preview

<body ng-controller="MainCtrl">
  <foo>
    <input ng-model="name"> <br />
    Inside new scope: {{ name }}
  </foo>
  <br />
  On the parent scope: {{ name }}

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

app.directive('foo', function() {
  return {
    restrict: 'E',
    scope: true
  };
});

在这里，我们正在创建一个名为foo的新范围指令。然后在我们的HTML，里面<foo>我们投入了ng-model与name 。它读取电流范围，哦，不存在，所以它上升到控制器的范围，并发现它。所以你看World上的输入。当您更改输入时，它会抓住它的内容并分配一个新的值。怎么样？它道出了它的范围，并为它分配。问题是，它的范围是创建的新范围foo正因为如此，父将再也看不到任何变化。

让我们来看看例子二： http://plnkr.co/edit/BSx37PpAEbPnHfs2jr5o?p=preview

<body ng-controller="MainCtrl">
  <foo>
    <input ng-model="user.name"> <br />
    Inside new scope: {{ user.name }}
  </foo>
  <br />
  On the parent scope: {{ user.name }}
</body>

app.controller('MainCtrl', function($scope) {
  $scope.user = {
    name: 'World'
  };
});

app.directive('foo', function() {
  return {
    restrict: 'E',
    scope: true
  };
});

在这里，同样的例子，但对于小的修改。在这里，我们name叫对象内的user 。当输入读取它，没有什么区别，但是当它要ASIGN一个新的价值，但它不同的东西，是这样的：嗨新的范围，你有这样的用户对象？ Errr没有...好，父母，你有这样的用户对象？我做。好，然后放入一个属性称为name与此内容。

你看得到差别吗？之前，它没有要求它的父，它刚刚创建的name在内部范围，但如果你使用的对象，它会尝试先找到对象，正是我们需要的。

该TL; DR; 是：总是使用对象，因为什么事给你的是一些您使用正在创造新的领域和新的任务的指令将要在内部范围内创建。

Answer 2:

创建了一个简单的jsfiddle展示它是如何正在做和角工作良好。

因为你没有在控制器中设置任何你的第一的console.log将不确定

就像是

 $scope.medName = '';

将帮助。

我在例如用于证明控制器的代码片断：

function test($scope){
    $scope.medName = '';
    console.log($scope.medName);
    $scope.$watch('medName',function(newValue){
        console.log("new Value:"+newValue);
    });
    $scope.getUpdatedScope = function(){
        console.log($scope.medName);
    }
}

Answer 3:

你代码实际工作，你键入实际输入的东西吗？它写出未定义的开头，因为它是，它不是在范围定义，您输入的数值为空。

我迅速做了一个的jsfiddle，这里是（基本上是你的）代码。 HTML：

<div ng-app="myApp">
    <div ng-controller="page1Ctrl">
        <input ng-model="medName" />
        <p ng-if="medName">{{medName}}</p>
    </div>
</div>

JS：

var app = angular.module('myApp', []);
app.controller('page1Ctrl',['$scope', function($scope){
    $scope.$watch('medName',function(newVlaue){
        console.log('Watching YOU !' + newVlaue);
    });
    console.log($scope.medName);
}]);

这里是的jsfiddle： http://jsfiddle.net/q3z22/4/你会在控制台“未定义”开头看，然后不管你在输入写。如果你不希望出现这种情况，只需在范围界定通过写$scope.medName = ''; 而你必须在开始一个空字符串。