我想使用模态来编辑我的数据.我将数据传递给模态实例.当我点击确定,我将编辑的数据在$scope.selected传回给控制器.
在那里我想更新原来的$范围.不知何故,$范围不会更新.我究竟做错了什么？
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;
});
};
};
模态控制器
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');
};
};
莫代尔：
<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>
你没有包括你的模态模板,所以这有点猜测.您的代码非常接近于角度模态的示例代码,该模式在模板中使用了ng-repeat.如果你做同样的事情,那么你应该注意到ng-repeat创建一个从父级继承的子范围.
从这个片段中可以看出：
$scope.ok = function () {
$modalInstance.close($scope.selected);
};
它看起来不是在你的模板中这样做：
<li ng-repeat="item in items">
<a ng-click="selected.item = item">{{ item }}</a>
</li>
你可能会这样做：
<li ng-repeat="item in items">
<a ng-click="selected = item">{{ item }}</a>
</li>
如果是这样,那么在您的情况下,您将在子范围内分配选择,这不会影响父范围的所选属性.然后,当您尝试访问$scope.selected.name时,它将为空.
一般来说,您应该为模型使用对象,并在其上设置属性,而不是直接分配新值.
This part of the documentation更详细地解释了范围问题.
编辑：
您也不会将输入绑定到任何型号,因此您进入的数据不会存储在任何地方.您需要使用ng-model来做到这一点,例如：
<input type="text" ng-model="editable.serial" /> <input type="text" ng-model="editable.name" />
见this plunkr一个工作示例.
