In my view I have an input, a span and a button like so:
在我看来，我有一个输入，一个跨度和一个按钮，如下所示：
<script type="text/ng-template" id="myTemplate.html">
<input type="text" ng-model="phoneNumber">
<span>{{ phoneNumber}}</span>
<input type="button" ng-click="click()">
</script>
When typing in the textbox, the content of the span updates as expected reading. But when clicking the button, phoneNumber has not updated inside the controller:
在文本框中键入内容时，跨度的内容会按预期读取更新。但是当单击按钮时，phoneNumber在控制器内部没有更新：
app.controller('myPopopCtrl', ['$scope', '$modalInstance',
function ($scope, $modalInstance) {
$scope.phoneNumber= '';
$scope.click = function() {
alert($scope.phoneNumber); // alerts only ''
};
Is there some newbe mistake you can make in angular which makes stuff not updating on the $scope inside a controller?
是否有一些你可以在angular中做出的newbe错误，这使得在控制器内的$ scope上没有更新内容？
Are there some $scope issues with the angular-ui modal I need to be aware of?
我需要注意的angular-ui模式是否存在一些范围问题？
Edit:
编辑：
It seems like phoneNumber gets created in 2 scopes. One time in the scope at the blue arrow which where phoneNumber: '' and once in the child scope at the red arrow. The view uses the phoneNumber in the child scope and the controller uses the phoneNumber in the parent scope...
似乎phoneNumber在2个范围内创建。有一次在蓝色箭头的范围内，其中phoneNumber：''和一次在红色箭头的子范围内。视图使用子范围中的phoneNumber，控制器使用父范围中的phoneNumber ...
Why are two scopes created?
为什么要创建两个范围？
2 个解决方案
#1
15
ng-include creates a new scope. So pass a object instead of string
ng-include创建一个新范围。所以传递一个对象而不是字符串
$scope.phone={number:null}
$ scope.phone = {号：空}
The template then looks like
然后模板看起来像
<script type="text/ng-template" id="myTemplate.html">
<input type="text" ng-model="phone.number">
<span>{{ phone.number}}</span>
<input type="button" ng-click="click()">
</script>
Look at this wiki to understand the issues with prototypal inheritance.
查看此Wiki以了解原型继承的问题。
#2
1
Had the same problem and after a few experiments I've settled on writing
有同样的问题，经过几次实验，我已经决定写作了
<input type="text" ng-model="$parent.phoneNumber">
This way input is bound to the blue scope, which is exactly what you wanted.
这种方式输入绑定到蓝色范围，这正是您想要的。
Other way is to initialise phoneNumber with a true-ish value. Try $scope.phoneNumber= '123'; - worked fine for me.
其他方法是使用true-ish值初始化phoneNumber。试试$ scope.phoneNumber ='123'; - 对我来说很好。
Angular seems to walk up the scope tree looking for an attribute to bind to. If nothing's found - it binds to the inner-most scope, red scope in your pic. As other answer suggests - this red scope is created by ng-include, as a child of controller's $scope.
Angular似乎走在范围树中寻找要绑定的属性。如果找不到任何东西 - 它会绑定到你的照片中最内部的范围，红色范围。正如其他答案所暗示的那样 - 这个红色范围是由ng-include创建的，作为控制器$ scope的子代。
#1
15
ng-include creates a new scope. So pass a object instead of string
ng-include创建一个新范围。所以传递一个对象而不是字符串
$scope.phone={number:null}
$ scope.phone = {号：空}
The template then looks like
然后模板看起来像
<script type="text/ng-template" id="myTemplate.html">
<input type="text" ng-model="phone.number">
<span>{{ phone.number}}</span>
<input type="button" ng-click="click()">
</script>
Look at this wiki to understand the issues with prototypal inheritance.
查看此Wiki以了解原型继承的问题。
#2
1
Had the same problem and after a few experiments I've settled on writing
有同样的问题，经过几次实验，我已经决定写作了
<input type="text" ng-model="$parent.phoneNumber">
This way input is bound to the blue scope, which is exactly what you wanted.
这种方式输入绑定到蓝色范围，这正是您想要的。
Other way is to initialise phoneNumber with a true-ish value. Try $scope.phoneNumber= '123'; - worked fine for me.
其他方法是使用true-ish值初始化phoneNumber。试试$ scope.phoneNumber ='123'; - 对我来说很好。
Angular seems to walk up the scope tree looking for an attribute to bind to. If nothing's found - it binds to the inner-most scope, red scope in your pic. As other answer suggests - this red scope is created by ng-include, as a child of controller's $scope.
Angular似乎走在范围树中寻找要绑定的属性。如果找不到任何东西 - 它会绑定到你的照片中最内部的范围，红色范围。正如其他答案所暗示的那样 - 这个红色范围是由ng-include创建的，作为控制器$ scope的子代。