mdDialog won't show templateUrl - angularjs

Our team is using mdDialog to pull up a modal that allows a user to edit answers to a questionnaire.
$scope.editQuestionFnct = function(val){
$scope.editWidget = {};
//alert(val);
spUtil.get("gateway_questionnaire_widget", {//call new instance of this widget
//sys_id: $scope.params.refID,
task_id: $scope.data.task_id,
quest_id: val,
request: 'edit',
taskTable: $scope.data.task_table,
questionnaire_table: $scope.params.questionnaireTable,
serviceID: $scope.params.serviceID,
refID: $scope.params.refID,
taskCompleted: false,
editRequest: true
}).then(function(response) {
$scope.editWidget = response;//var to hold widget response to display in modal
$scope.showPrerenderedDialog('#editQuestion');
});
}
$scope.showPrerenderedDialog = function(name) {
$mdDialog.show({
templateUrl: name,
parent: angular.element(document.body),
clickOutsideToClose:true
});
};
$scope.closeDialog = function($scope){ //closes angular dialog window
$mdDialog.hide($scope);
}
$scope.closeSummDialog = function($scope){ //closes angular dialog window
$mdDialog.hide($scope);
}
<script type="text/ng-template" id="editQuestion">
<div class="md-dialog-container" >
<md-dialog style="background-color: #ffffff;" aria-label="edit dialog">
<md-toolbar style="background-color: #022C68; width: 100%;">
<h1 class="md-toolbar-tools" style="color: #ffffff;">Edit Response</h1>
</md-toolbar>
<md-dialog-content style="background-color: #ffffff;">
<div id="editQuestDiv" style="min-width: 700px;">
<sp-widget widget="editWidget"></sp-widget>
</div>
</md-dialog-content>
<md-dialog-actions layout="row">
<span flex></span>
<md-button ng-click="closeDialog()" style="background-color: #022C68; color: #ffffff;">
Close
</md-button>
</md-dialog-actions>
</md-dialog>
</div>
</script>
We are experiencing two problems with the above code:
First, instead of using templateUrl, we were using contentElement, which worked. Using contentElement pulled up a modal with the question that required editing. However, when a user clicks out of that first click, and clicks on another question, the same question that appeared in the first click shows up. Every click afterwards will only pull up the question from the first click.
After doing some reading, we decided to try and use templateUrl instead, but using that above opens up a modal with nothing in it:
Can someone explain what we're doing wrong? Are we doing something wrong with contentElement where only the question from the first click persists? If we were to use templateUrl, why isn't our modal showing up?
Thanks!

Related

Using mdDialog with ng-repeat keeps displaying the same information from first click

Our team is building an app in ServiceNow and using AngularJS Material. We built a questionnaire that allows users to make edits to answers at the end. For the questions that can be edited, we're trying to use mdDialog that brings up a modal window where a user can edit their answers. The issue we're running into is that when a user clicks to edit an answer, then closes that modal to open up another answer to edit, the modal opens the first answer every time. We can't seem to close that scope to open another one.
In our HTML, we have a pencil glyphicon that has an ng-click for a function editQuestionFnct:
<td rowspan="2" style="color: #979797; padding-right: 15px; cursor: pointer;" ng-click="editQuestionFnct(item.quest_id)"><span class="glyphicon glyphicon-pencil" title="Edit Answer" style="padding-right: 5px;"></span></td>
That editQuestionFnct passes in several items into the showPrerenderedDialog function that generates the modal:
$scope.editQuestionFnct = function(val){
$scope.editWidget = {};
spUtil.get("gateway_questionnaire_widget", {//call new instance of this widget
task_id: $scope.data.task_id,
quest_id: val,
request: 'edit',
taskTable: $scope.data.task_table,
questionnaire_table: $scope.params.questionnaireTable,
serviceID: $scope.params.serviceID,
refID: $scope.params.refID,
taskCompleted: false,
editRequest: true
}).then(function(response) {
$scope.editWidget = response;//var to hold widget response to display in modal
$scope.showPrerenderedDialog('#editQuestion');
});
}
The showPrerenderedDialog function renders the modal:
$scope.showPrerenderedDialog = function(name) {
$mdDialog.show({
contentElement: name,
parent: angular.element(document.body),
clickOutsideToClose:true
});
};
Here is the md-dialog template:
<div style="visibility: hidden">
<div class="md-dialog-container" id="editQuestion">
<md-dialog style="background-color: #ffffff;" aria-label="edit dialog">
<md-toolbar style="background-color: #022C68; width: 100%;">
<h1 class="md-toolbar-tools" style="color: #ffffff;">Edit Response</h1>
</md-toolbar>
<md-dialog-content style="background-color: #ffffff;">
<!--<div id="editQuestDiv" style="min-width: 700px;">-->
<sp-widget widget="editWidget"></sp-widget>
<!--</div>-->
</md-dialog-content>
<md-dialog-actions layout="row">
<span flex></span>
<md-button ng-click="closeDialog()" class="md-primary md-raised">
Close
</md-button>
</md-dialog-actions>
</md-dialog>
</div>
What am i missing from the above code so that I can open one modal for a specific question and then open up another modal with another question? Thanks.

ng-click not responding when HTML added by JavaScript

ng-click is not working as it should. I tried looking at documentation and tutorials but couldn't find the reason.
I have a JavaScript variable storing html template. which by using
document.getElementById('someId').innerHTML = emptypage;
where emptypage is a JavaScript variable, is implemented inside a div with id=someId.
My Code:
var emptypage=` <md-toolbar `+ this.createID() +` class="md-accent
soopsObject" ng-app="vdApp">
<span class="example-spacer ng-controller="vdNav">
<md-sidenav class="md-sidenav-left" md-component-id="left" md-
disable-backdrop md-whiteframe="4">
<md-content layout-margin>
<p>
About
</p>
<p>
Contact
</p>
<md-button ng-click="toggleLeft()" class="md-accent">
Close
</md-button>
</md-content>
</md-sidenav>
<div>
<md-button ng-click="toggleLeft()">
<md-icon>menu</md-icon> Menu
</md-button>
</div>
</span>
</md-toolbar>`;
My Controller:
var nav=angular.module("vdApp", []);
nav.controller("vdNav", function($scope, $mdSidenav) {
alert("inside leftToggle");
$scope.toggleLeft = buildToggler('left');
function buildToggler(componentId){
return function(){
$mdSidenav(componentId).toggle();
};
}
});
Even alert isn't working.
What am I doing wrong? Any help or suggestion is appreciated.

Angular: close ng-sidenav after a click on a element

Using angular & material, I have a sidenav on the left used to provide user's function (login, signup...).
Working fine, but I want the bar to be closed automatically once the user clicks on a menu. Currently, the bar stays open.
The sidebar code:
<md-sidenav md-component-id="user_sidenav" class="md-sidenav-left" flex>
<md-menu-content flex>
<md-menu-item>
<md-button ui-sref="app.user-state()">
<span>
User
</span>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ui-sref="vlg.user-other-state()">
<span>
Other
</span>
</md-button>
</md-menu-item>
...
Any idea?
What I have done is create a function in the controller for closing the sidenav and then on clicking of an element calling the function.
app.controller('AppController', ['$scope', '$mdSidenav',
function ($scope, $mdSidenav) {
$scope.close = function () {
$mdSidenav('left').close();
};
}]);
and then in html
<div ng-controller="AppController">
<!-- Add in code for sidenav-->
<md-button ng-href="#/path" ng-click="close()"></md-button>
</div>
You could also just add the below code to a function if your elements already have a ng-click attached.
.then(function () {
$mdSidenav('left').close();
});

calling modal once text is clicked:Angularjs

I want to show following modal once user click the text. I don't know why it is not working.
<span ng-model="nonrelevantData" style="cursor: pointer;
text-decoration: underline;"><b>non-relevant data</b></span>
<script type="text/ng-template" id="bs-example-modal-sm">
<div class="modal-body">
...
</div>
<div class="modal-footer">
...
</div>
</script>
in js
$scope.$watch('nonrelevantData', function () {
$modal({
template: 'bs-example-modal-sm',
scope:$scope.$new()
});
}, true);
You can put your modal code in a scope function and call that function in ng-click
$scope.openModal = function(){
$modal({
template: 'bs-example-modal-sm',
scope:$scope.$new()
});
}
Markup
<div ng-click="openModal()">clik me to open</div>
I modified the plunkr of fancypants (from another question) to make a Simple Modal Example
To listen for clicks you don't need a watcher. The ngClick directive can be used for that.

Invoking modal window in AngularJS Bootstrap UI using JavaScript

Using the example mentioned here, how can I invoke the modal window using JavaScript instead of clicking a button?
I am new to AngularJS and tried searching the documentation here and here without luck.
Thanks
OK, so first of all the http://angular-ui.github.io/bootstrap/ has a <modal> directive and the $dialog service and both of those can be used to open modal windows.
The difference is that with the <modal> directive content of a modal is embedded in a hosting template (one that triggers modal window opening). The $dialog service is far more flexible and allow you to load modal's content from a separate file as well as trigger modal windows from any place in AngularJS code (this being a controller, a service or another directive).
Not sure what you mean exactly by "using JavaScript code" but assuming that you mean any place in AngularJS code the $dialog service is probably a way to go.
It is very easy to use and in its simplest form you could just write:
$dialog.dialog({}).open('modalContent.html');
To illustrate that it can be really triggered by any JavaScript code here is a version that triggers modal with a timer, 3 seconds after a controller was instantiated:
function DialogDemoCtrl($scope, $timeout, $dialog){
$timeout(function(){
$dialog.dialog({}).open('modalContent.html');
}, 3000);
}
This can be seen in action in this plunk: http://plnkr.co/edit/u9HHaRlHnko492WDtmRU?p=preview
Finally, here is the full reference documentation to the $dialog service described here:
https://github.com/angular-ui/bootstrap/blob/master/src/dialog/README.md
To make angular ui $modal work with bootstrap 3 you need to overwrite the styles
.modal {
display: block;
}
.modal-body:before,
.modal-body:after {
display: table;
content: " ";
}
.modal-header:before,
.modal-header:after {
display: table;
content: " ";
}
(The last ones are necessary if you use custom directives) and encapsulate the html with
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
Open modal windows with passing data to dialog
In case if someone interests to pass data to dialog:
app.controller('ModalCtrl', function($scope, $modal) {
$scope.name = 'theNameHasBeenPassed';
$scope.showModal = function() {
$scope.opts = {
backdrop: true,
backdropClick: true,
dialogFade: false,
keyboard: true,
templateUrl : 'modalContent.html',
controller : ModalInstanceCtrl,
resolve: {} // empty storage
};
$scope.opts.resolve.item = function() {
return angular.copy(
{name: $scope.name}
); // pass name to resolve storage
}
var modalInstance = $modal.open($scope.opts);
modalInstance.result.then(function(){
//on ok button press
},function(){
//on cancel button press
console.log("Modal Closed");
});
};
})
var ModalInstanceCtrl = function($scope, $modalInstance, $modal, item) {
$scope.item = item;
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}
Demo Plunker
The AngularJS Bootstrap website hasn't been updated with the latest documentation. About 3 months ago pkozlowski-opensource authored a change to separate out $modal from $dialog commit is below:
https://github.com/angular-ui/bootstrap/commit/d7a48523e437b0a94615350a59be1588dbdd86bd
In that commit he added new documentation for $modal, which can be found below:
https://github.com/angular-ui/bootstrap/blob/d7a48523e437b0a94615350a59be1588dbdd86bd/src/modal/docs/readme.md.
Hope this helps!
Quick and Dirty Way!
It's not a good way, but for me it seems the most simplest.
Add an anchor tag which contains the modal data-target and data-toggle, have an id associated with it. (Can be added mostly anywhere in the html view)
Now,
Inside the angular controller, from where you want to trigger the modal just use
angular.element('#myModalShower').trigger('click');
This will mimic a click to the button based on the angular code and the modal will appear.
Different version similar to the one offered by Maxim Shoustin
I liked the answer but the part that bothered me was the use of <script id="..."> as a container for the modal's template.
I wanted to place the modal's template in a hidden <div> and bind the inner html with a scope variable called modal_html_template
mainly because i think it more correct (and more comfortable to process in WebStorm/PyCharm) to place the template's html inside a <div> instead of <script id="...">
this variable will be used when calling $modal({... 'template': $scope.modal_html_template, ...})
in order to bind the inner html, i created inner-html-bind which is a simple directive
check out the example plunker
<div ng-controller="ModalDemoCtrl">
<div inner-html-bind inner-html="modal_html_template" class="hidden">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</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>
</div>
<button class="btn" ng-click="open()">Open me!</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
inner-html-bind directive:
app.directive('innerHtmlBind', function() {
return {
restrict: 'A',
scope: {
inner_html: '=innerHtml'
},
link: function(scope, element, attrs) {
scope.inner_html = element.html();
}
}
});

Resources