【发布时间】：2015-12-05 04:28:13
【问题描述】：
我正在尝试打开一个 AngularJS 模式并作为参数传入 HTML 表单控件。到目前为止，我已经设法学习如何传入和接收返回值，只要它们与模式中的硬编码控件相关联。
问题似乎是让软编码（我作为参数传递的表单控件）进入与模态范围的其余部分相同的范围。我四处寻找一个孤立的范围，但甚至不确定这是否朝着正确的方向发展。在某个地方，我读到这与嵌入有关……不管那是什么？
任何帮助将不胜感激。
这是下面显示的代码的一个小插曲。
http://plnkr.co/edit/gg8IJeC62Im0evqmyN0U?p=preview
在我的示例中，我希望能够输入一个种子值，然后单击打开模式按钮，然后看到种子值出现在软编码和硬编码输入文本框中。软编码的文本框好像不太喜欢我……:-(
我的 HTML：
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<link data-require="bootstrap-css@*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script data-require="jquery@>=1.9.1 <3" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script data-require="bootstrap@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.js"></script>
<script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script data-require="angular-sanitize@*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-sanitize.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
<!--link rel="stylesheet" href="style.css" /-->
<script src="script.js"></script>
</head>
<body>
<div ng-controller="MainController as MainController">
<h1>How to pass values and code to Modal and maintain Scope?</h1>
<div>Enter Seed Value below, then click open model and change the value.</div>
<br /> Seed Value:
<input type="text" ng-model="MainController.mySeedValue" />
<button ng-click="MainController.OpenModal()">OpenModal</button>
<br />
<br />
<div>Assuming the seed value was change while the modal was open , the revised value should be refelected below.</div>
<br /> Result: {{MainController.myModalResults.mySeedValue}}
</div>
</body>
</html
我的模态模板：
<div class="modal-header">
<button class="close" data-dismiss="modal" aria-hidden="true" ng-click="cancel()">×</button>
<span>{{params.header}} Report Configuration</span>
</div>
<div class="modal-body">
<div class="row">
params.body: {{ params.body }}
<br />
params.mySeedValue: {{params.mySeedValue}}
<br />
Soft Coded: <div ng-bind-html="params.body | unsafe"></div>
<br />
Hard Coded: <input type="text" ng-model="params.mySeedValue" />
<br />
</div>
<div class="row">
<button class="btn" ng-click="cancel()">Cancel</button>
<button class="btn btn-primary" ng-click="ok(params)">Save</button>
</div>
</div>
我的 JavaScript 文件：
var app = angular.module('myApp', ['ui.bootstrap', 'ngSanitize']);
app.controller('MainController', ['$scope', '$uibModal', '$sce', function ($scope, $uibModal, $sce) {
_this = this;
this.OpenModal = function () {
var scope = $scope.$new(true);
scope.params = {
'header': 'TestHeader',
'body': '<input type="text" ng-model="params.mySeedValue" />',
'mySeedValue': _this.mySeedValue
};
var modalInstance = $uibModal.open({
scope: scope,
templateUrl: 'myModal.html',
controller: myModalController,
backdrop: 'static'
});
modalInstance.result.then(function (modalResults) {
_this.myModalResults = modalResults
//on ok button press
console.log("Modal Saved");
}, function () {
//on cancel button press
console.log("Modal Closed");
});
};
}]);
var myModalController = function ($scope, $uibModalInstance) {
$scope.ok = function () {
$uibModalInstance.close($scope.params);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
};
// return safe html code
app.filter('unsafe', function ($sce) {
return function (val) {
return $sce.trustAsHtml(val);
};
});
结束
【问题讨论】：
标签： angularjs angularjs-scope angular-ui-bootstrap ngsanitize