[英]$scope.myVariable not updated in controller for angular-ui bootstrap modal
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. 在文本框中键入时, span
的内容将按预期读取更新。 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. 似乎phoneNumber
在2个范围内创建。 One time in the scope at the blue arrow which where phoneNumber: ''
and once in the child scope at the red arrow. 有一次在蓝色箭头的范围内,其中phoneNumber: ''
和一次在红色箭头的子范围内。 The view uses the phoneNumber
in the child scope and the controller uses the phoneNumber
in the parent scope... 该视图使用phoneNumber
在儿童范围和控制器使用phoneNumber
父范围...
Why are two scopes created? 为什么要创建两个范围?
ng-include
creates a new scope. ng-include
创建一个新范围。 So pass a object instead of string 所以传递一个对象而不是字符串
$scope.phone={number:null}
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以了解原型继承的问题。
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. 其他方法是使用true-ish值初始化phoneNumber。 Try $scope.phoneNumber= '123';
试试$scope.phoneNumber= '123';
- worked fine for me. - 对我来说很好。
Angular seems to walk up the scope tree looking for an attribute to bind to. Angular似乎走向范围树,寻找要绑定的属性。 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. 正如其他答案所暗示的那样 - 这个红色范围是由ng-include创建的,作为控制器$ scope的子代。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.