twitter-bootstrap Angular UI Modal 2 方式绑定不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23518835/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular UI Modal 2 Way Binding Not Working
提问by Neel
I am adding an Angular UI Modal where I am passing the scope through to the Modal Window for 2 way binding. I used the resolvemethod to pass the scope value. Doing so works sort of works meaning when the ng-model value changes in parent, it reflects inside the modal window. However, if the value changes inside the modal window, it is not reflecting in the parent ng-model. Here is my code:
我正在添加一个 Angular UI 模态，我将范围传递到模态窗口以进行 2 路绑定。我使用该resolve方法传递范围值。这样做是有效的，这意味着当父模型中的 ng-model 值发生变化时，它会反映在模态窗口内。但是，如果该值在模态窗口内发生变化，则不会反映在父 ng-model 中。这是我的代码：
HTML:
HTML：
<div ng-app="app">
<div ng-controller="ParentController">
<br />
<input type="text" ng-model="textbox.sample" />
<a class="btn btn-default" ng-click="open(textbox.sample)">Click Me</a>
<script type="text/ng-template" id="ModalContent.html">
<input type = "text" ng-model= "ngModel" / >
</script>
<br />{{ textbox }}
</div>
</div>
Controller:
控制器：
var app = angular.module('app', ['ui.bootstrap']);
app.controller('ParentController', function ($scope, $modal) {
$scope.textbox = {};
// MODAL WINDOW
$scope.open = function (_ngModel) { // The ngModel is passed from open() function in template
var modalInstance = $modal.open({
templateUrl: 'ModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
ngModel: function () {
return _ngModel;
}
} // end resolve
});
};
});
var ModalInstanceCtrl = function ($scope, $modalInstance, ngModel) {
$scope.ngModel = ngModel;
};
Why isint the 2 way binding between parent and modal instance not working in the above code?
为什么在上面的代码中，父实例和模态实例之间的 2 路绑定不起作用？
采纳答案by Tom
I think you're under the impression that ng-model="textbox.sample"in the parent and ng-model="ngModel"in the modal are the same because you are passing textbox.sampleto the modal and you're able to see the correct value in the modal window. The only reason this is working is because you're explicitly setting the $scope.ngModelproperty every time to modal window opens.
我认为您的印象是ng-model="textbox.sample"在父级和ng-model="ngModel"模态中是相同的，因为您正在传递textbox.sample到模态并且您能够在模态窗口中看到正确的值。这样做的唯一原因是因为$scope.ngModel每次打开模态窗口时您都明确设置了该属性。
One way to make this work how you expect is to just use the $scope.textbox.sampleproperty in both places, but I wouldn't recommend that.
使这项工作如您所愿的一种方法是$scope.textbox.sample在两个地方都使用该属性，但我不建议这样做。
Perhaps the proper way would be to use the modalInstance.resultpromise, something like this:
也许正确的方法是使用modalInstance.result承诺，如下所示：
Create a button on the modal and make it's ng-click="ok()"
在模态上创建一个按钮并使其成为 ng-click="ok()"
$scope.ok = function () {
$modalInstance.close($scope.ngModal); // will return this to the modalInstance.result
}
And then in the parent controller, or whatever opens the modal window:
然后在父控制器中，或者打开模态窗口的任何东西：
$scope.open = function (_ngModel) { // The ngModel is passed from open() function in template
var modalInstance = $modal.open({
templateUrl: 'ModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
ngModel: function () {
return _ngModel;
}
} // end resolve
});
modalInstance.result.then(function (result) {
$scope.textbox.sample = result;
});
};
回答by Diana Nassar
Change:
改变：
<input type = "text" ng-model= "ngModel" / >
Into:
进入：
<input type = "text" ng-model= "$parent.ngModel" / >
This has to do with transclusion. Check: https://github.com/angular-ui/bootstrap/issues/969
这与嵌入有关。检查：https: //github.com/angular-ui/bootstrap/issues/969
回答by Ulysses Alves
For me none of the above worked.
对我来说，以上都没有奏效。
Instead I had to do like was suggested in this comment in github.
相反，我不得不像在 github 的这个评论中建议的那样做。
The variable to be binded to must be an object, not only a simple value.
要绑定的变量必须是一个对象，而不仅仅是一个简单的值。
For example, if $scope.valuedoes not work, it will work if you use $scope.someObject.value.
例如，如果$scope.value不起作用，则使用$scope.someObject.value.
