$scope.myVariable 未在 angular-ui 引导模式的控制器中更新 [英] $scope.myVariable not updated in controller for angular-ui bootstrap modal

问题描述

在我看来，我有一个输入、一个跨度和一个按钮，如下所示:

在文本框中键入时，span 的内容按预期更新.但是当点击按钮时，phoneNumber 并没有在控制器内部更新:

app.controller('myPopopCtrl', ['$scope', '$modalInstance',函数($scope，$modalInstance){$scope.phoneNumber='';$scope.click = function() {警报($scope.phoneNumber)；//仅警报 ''};

您是否可以在 angular 中犯一些新的错误，导致控制器内的 $scope 上的东西没有更新?

我需要的 以了解原型继承的问题.

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:

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?

Are there some $scope issues with the angular-ui modal I need to be aware of?

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...

Why are two scopes created?

解决方案

ng-include creates a new scope. 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.

这篇关于$scope.myVariable 未在 angular-ui 引导模式的控制器中更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！