$ scope.myVariable không được cập nhật trong điều khiển cho góc-ui bootstrap modal

Question

Theo quan điểm của tôi, tôi có một đầu vào, một khoảng và một nút như vậy:

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

Khi gõ vào hộp văn bản, nội dung của các cập nhật span như mong đợi. Nhưng khi nhấp vào nút, phoneNumber đã không cập nhật bên trong bộ điều khiển:

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

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

Có một số sai lầm newbe bạn có thể thực hiện trong góc mà làm cho những thứ không được cập nhật trên $scope bên trong một bộ điều khiển?

Có một số vấn đề về phạm vi $ với angular-ui modal Tôi cần phải biết?

Edit:

Nó có vẻ như phoneNumber được tạo ra trong 2 phạm vi. Một lần trong phạm vi ở mũi tên màu xanh ở đó phoneNumber: '' và một lần trong phạm vi con ở mũi tên màu đỏ. Quan điểm sử dụng phoneNumber trong phạm vi trẻ em và bộ điều khiển sử dụng phoneNumber trong phạm vi cha mẹ ...

Tại sao hai lĩnh vực tạo ra?

Answer 1

ng-include tạo phạm vi mới. Vì vậy, thông qua một đối tượng thay vì chuỗi

$scope.phone={number:null}

Mẫu sau đó trông giống như

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

Nhìn vào wiki này để hiểu rõ các vấn đề với thừa kế nguyên chủng.

Answer 2

Đã cùng một vấn đề và sau một vài thí nghiệm tôi đã giải quyết trên viết

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

Bằng cách này đầu vào được ràng buộc với phạm vi màu xanh, đó là chính xác những gì bạn muốn.

Cách khác là khởi chạy phoneNumber với giá trị true-ish. Hãy thử $scope.phoneNumber= '123'; - đã làm việc tốt cho tôi.

Góc dường như đi bộ lên cây phạm vi tìm kiếm thuộc tính để liên kết. Nếu không có gì được tìm thấy - nó liên kết với phạm vi bên trong nhất, phạm vi màu đỏ trong pic của bạn. Như câu trả lời khác cho thấy - phạm vi màu đỏ này được tạo ra bởi ng-include, như là một con của phạm vi $ của bộ điều khiển.