双向绑定，范围变量未定义 [英] Two way binding, scope variable undefined
问题描述
我在写有OnesnUI和AngularJS一个应用程序，采用NG-模型来获得DOM元素输入。
I'm writing an app with OnesnUI and AngularJS, using ng-model to get the input from DOM elements.
有我的code
<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 ：
and trying to retrieve the value from input textbox, there's my 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 打印的值未定义？
推荐答案
如果我必须命名角一个适当的疼痛，这将是范围继承。
If I have to name a proper pain in Angular, it would be scope inheritance.
如果您已假设 $ scope.foo =你好是控制器，然后创建该控制器的儿童范围，然后尝试分配新值富那会克里特岛的新 富新的范围内。你父控制器将永远不会看到的变化。
If you have let's say $scope.foo = "hello" is the controller and then you create a children scope of that controller and then you try to assign a new value to foo that would crete a new foo inside that new scope. Your parent controller will never see the changes.
在你的问题，你是不是创建一个新的范围，但OnsenUI正在这样做也许是附件，屏幕上或附件导航仪。然后你输入一个新的子范围内，如果您尝试分配 newMed 这是要对孩子的范围这么做。
In your problem, you are not creating a new scope, but that OnsenUI is doing so maybe on the ons-screen or ons-navigator. Then your input is inside a new child scope and if you try to assign the newMed it is going to do so on the child scope.
该规则始终是有对象，那就是所谓的点规则（检查的这里）。
The rule always is to have objects, that is called the dot rule (check here).
所以，如果你不想再有这个问题，一直不喜欢我告诉你的评论，创建类似 $ scope.meds = {} 和那么 NG-模式=meds.newMed，因为这样一来，它将搜索吃药的父母第一和如果它发现它，它会使用它，这是你想要做的事情。
So if you don't want to have this problem again, always do like I told you on the comment, create something like $scope.meds = {} and then ng-model="meds.newMed" because that way, it will search for meds on the parents first and if it finds it, it will use it and that is what you want to do.
下面是错的做它的第一个例子： http://plnkr.co /编辑/ IJZOa1pXtcQePiEVMzjZ？p = preVIEW
Here is the first example of doing it wrong: 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，在＆LT;富＆GT; 我们把一个 NG-模型与名称。它读取当前范围，哦，不存在，所以它上升到控制器的范围，并找到它。所以你看全球输入。当您更改输入时，它会抓住它的内容和分配新值。怎么样？它道出了它的范围，并为它分配。问题是，它的范围是富正因为如此，父将再也看不到任何变化所造成的新范围。
Here we are a directive that is creating a new scope called foo. Then on our html, inside <foo> we put a ng-model with name. It reads the current scope, oh, not there, so it goes up to the controller's scope and find it. So you see World on the input. When you change the input, it will grab the content of it and assign a new value. How? It goes to its scope, and assign it. The problem is that its scope is the new scope created by foo and because of that, the parent will never see any changes.
让我们来看看例子二： http://plnkr.co/edit/BSx37PpAEbPnHfs2jr5o p = preVIEW
Let's see example number two: 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
};
});
下面，相同的例子，但是对于小的修改。在这里，我们有名称称为对象的内部用户。当输入读取它，没有什么区别，但是当它是将 ASIGN 新的价值，但它不同的东西，是这样的：嗨新的范围，你有此用户对象？ Errr没有...好，父母，你有这样的用户对象？我做。好，然后放入它被称为属性名称与此内容。
Here, same example but with a minor change. Here we have name inside an object called user. When the input reads it, there is no difference but when it is going to asign a new value, it does something different, something like: Hey new scope, do you have this user object? Errr no... ok, parent, you have this user object? I do. Good, then put into it a property called name with this content.
你看有什么区别？之前，它没有要求它的父，它刚刚创建的名称在内的范围，但如果你使用的对象，它会尝试先找到对象，正是我们需要的。
Do you see the difference? Before it didn't ask it parent, it just created the name on the inner scope, but if you use objects, it will try to find the object first, exactly what we need.
在 TL; DR; 是：总是使用对象，因为什么事给你的是一些您正在使用正在创造新的领域和新的任务是指令将要在内部范围内创建。
The TL;DR; is: always use objects because what happened to you is that some of the directives you were using are creating new scopes and your new assignments are going to be created on inner scope.
这篇关于双向绑定，范围变量未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
