我添加了一个 Angular UI 模态,将范围传递到模态窗口以进行 2 路绑定。我用的是resolve
方法来传递范围值。这样做的作用有点作用,这意味着当父级中的 ng-model 值发生变化时,它会反映在模式窗口内。但是,如果值在模态窗口内发生变化,则不会反映在父 ng-model 中。这是我的代码:
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>
控制器:
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;
};
为什么父实例和模态实例之间的 2 路绑定在上面的代码中不起作用?
Change:
<input type = "text" ng-model= "ngModel" / >
Into:
<input type = "text" ng-model= "$parent.ngModel" / >
这与嵌入有关。查看:https://github.com/angular-ui/bootstrap/issues/969
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)