$ scope.myVariable nicht Bootstrap-modal

Question

meiner Ansicht nach in der Steuerung für Winkel-ui aktualisiert ich einen Eingang, eine Spannweite und eine Taste wie folgt:

<script type="text/ng-template" id="myTemplate.html"> 
    <input type="text" ng-model="phoneNumber"> 
    <span>{{ phoneNumber}}</span> 
    <input type="button" ng-click="click()"> 
</script> 

Wenn in der Textbox eingeben, wird der Inhalt der span Updates wie erwartet zu lesen. Aber wenn die Schaltfläche klicken, hat phoneNumber nicht in der Steuerung aktualisiert:

app.controller('myPopopCtrl', ['$scope', '$modalInstance', 
    function ($scope, $modalInstance) { 
     $scope.phoneNumber= '';  

     $scope.click = function() { 
     alert($scope.phoneNumber); // alerts only '' 
     }; 

Gibt es einen Fehler, den Sie newbe in Winkel machen können, die macht das Material nicht auf dem $scope in einem Controller zu aktualisieren?

Gibt es einige $ Scope-Probleme mit der angular-ui modal muss ich beachten?

Edit:

Es scheint wie phoneNumber in zwei Bereiche erstellt wird. Einmal im Bereich am blauen Pfeil, wo phoneNumber: '' und einmal im Kindbereich am roten Pfeil. Die Ansicht verwendet die phoneNumber im geordneten Bereich und der Controller verwendet die phoneNumber im übergeordneten Bereich ...

Warum zwei Bereiche erstellt?

Answer 1

ng-include erstellt einen neuen Bereich. Pass also ein Objekt statt String

$scope.phone={number:null}

Die Vorlage dann wie in diesem wiki

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

Blick sieht die Probleme mit prototypische Vererbung zu verstehen.

Answer 2

hatte das gleiche Problem und nach einigen Versuchen habe ich ließ sich auf

<input type="text" ng-model="$parent.phoneNumber"> 

Auf diese Weise Eingang in den blauen Rahmen gebunden ist, zu schreiben, das ist genau das, was Sie wollten.

Andere Möglichkeit ist, PhoneNumber mit einem wahren Wert zu initialisieren. Versuchen Sie $scope.phoneNumber= '123'; - funktionierte gut für mich.

Angular scheint auf der Suche nach einem Attribut zu gehen, um den Umfangsbaum zu erreichen. Wenn nichts gefunden wird - es bindet an den innersten Bereich, roten Bereich in Ihrem Bild. Wie andere Antworten vorschlagen - dieser rote Bereich wird von ng-include als Kind des $ scope des Controllers erstellt.