I'm attempting to open an AngularJS modal and pass in as a parameter HTML form controls. So far I've managed to learn how to pass in and receive back values so long as they are tied to hard coded controls in the modal.
The problem seems to be getting the soft coded (form controls that I'm passing as parameters) to get into the same scope as the rest of the scope of the modal. I have poked around looking for an isolated scope but not even sure if this is going in the right direction. Someplace, I read this has to do with transclusion... whatever that is?
Any help would be greatly appreciated.
Here is a plunker to the code shown below.
http://plnkr.co/edit/gg8IJeC62Im0evqmyN0U?p=preview
In my sample, I expect to be able to enter a seed value, then click on the open modal button and see the seed value appear in the soft coded and the hard coded input text boxes. The soft coded text box does not seem to like me very much...:-(
My 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
My Modal Template:
<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>
My JavaScript File:
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);
};
});
the End
