Giao diện người dùng góc Bootstrap Cập nhật phương thức $ scope

Question

Tôi muốn sử dụng phương thức để chỉnh sửa dữ liệu của mình. Tôi chuyển dữ liệu sang thể hiện phương thức. Khi tôi nhấn OK, tôi chuyển dữ liệu đã chỉnh sửa trong $ scope.selected trở lại bộ điều khiển.

Ở đó tôi muốn cập nhật phạm vi $ ban đầu. Bằng cách nào đó phạm vi $ không cập nhật mặc dù. Tôi đang làm gì sai?

var ModalDemoCtrl = function ($scope, $modal, $log) { 

    $scope.data = { name: '', serial: '' } 

    $scope.edit = function (theIndex) { 

    var modalInstance = $modal.open({ 
     templateUrl: 'myModalContent.html', 
     controller: ModalInstanceCtrl, 
     resolve: { 
     items: function() { 
      return $scope.data[theIndex]; 
     } 
     } 
    }); 

    modalInstance.result.then(function (selectedItem) { 
     $scope.selected = selectedItem; 

     // this is where the data gets updated, but doesn't do it 
     $scope.data.name = $scope.selected.name; 
     $scope.data.serial = $scope.selected.serial; 

    }); 
    }; 
}; 

phương thức điều khiển:

var ModalInstanceCtrl = function ($scope, $modalInstance, items) { 

    $scope.items = items; 
    $scope.selected = { 
    name: $scope.items.name, 
    serial: $scope.items.serial 
    }; 

    $scope.ok = function() { 
    $modalInstance.close($scope.selected); 
    }; 

    $scope.cancel = function() { 
    $modalInstance.dismiss('cancel'); 
    }; 
}; 

Modal:

<div class="modal-header"> 
    <h3>{{ name }}</h3> 
</div> 
<div class="modal-body"> 
    <input type="text" value="{{ serial }}"> 
    <input type="text" value="{{ name }}"> 
</div> 
<div class="modal-footer"> 
    <button class="btn btn-primary" ng-click="ok()">OK</button> 
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button> 
</div> 

Answer 1

Bạn không bao gồm mẫu của bạn cho các phương thức, vì vậy đây là một chút của một đoán. Mã của bạn khá gần với mã ví dụ cho phương thức góc-ui, sử dụng ng-repeat trong mẫu. Nếu bạn đang làm điều tương tự, thì bạn nên biết rằng ng-repeat tạo phạm vi con được kế thừa từ cấp độ gốc.

Đánh giá từ đoạn này:

$scope.ok = function() { 
    $modalInstance.close($scope.selected); 
}; 

nó trông giống như thay vì làm điều này trong mẫu của bạn:

<li ng-repeat="item in items"> 
    <a ng-click="selected.item = item">{{ item }}</a> 
</li> 

bạn có thể làm một cái gì đó như thế này:

<li ng-repeat="item in items"> 
    <a ng-click="selected = item">{{ item }}</a> 
</li> 

Nếu vì vậy, trong trường hợp của bạn, bạn chỉ định selected trong phạm vi con và điều này sẽ không ảnh hưởng thuộc tính selected của phạm vi gốc. Sau đó, khi bạn cố truy cập $scope.selected.name, nó sẽ trống. Nói chung, bạn nên sử dụng các đối tượng cho mô hình của mình và đặt thuộc tính trên chúng, không chỉ định giá trị mới trực tiếp.

This part of the documentation giải thích vấn đề phạm vi chi tiết hơn.

Edit:

Bạn cũng không ràng buộc đầu vào của bạn cho bất kỳ mô hình nào cả, vì vậy dữ liệu bạn nhập có được không bao giờ được lưu trữ ở bất cứ đâu. Bạn cần phải sử dụng ng-model để làm điều đó, ví dụ .:

<input type="text" ng-model="editable.serial" /> 
<input type="text" ng-model="editable.name" /> 

Xem this plunkr cho một ví dụ làm việc.