I hope this will help others too as there isn't a lot of documentation about this exactly.
I want to use a RTE (rich text editor) within a macro I've created to handle page sections.
I have successfully rendered the RTE within the macro. I can select my macroRte from the macro parameters panel. It even renders where I edit the values of my page section. I have attributed the alias of "macroRte" to the parameter.
However, it is not storing the values. Each time I press submit it is wiping the content.
I'm no Angular expert but i think that's the problem. Code below. Thank you.
View
<div ng-controller="CustomSectionEditController" class="umb-editor umb-rte">
<umb-editor model="macroRte">
<div ng-model="model.value">{{model.value}}</div>
</umb-editor>
Controller
angular.module("umbraco").controller("CustomSectionEditController", function ($scope) {
$scope.macroRte = {
label: 'bodyText',
description: 'Load some stuff here',
view: 'rte',
config: {
editor: {
toolbar: ["code", "undo", "redo", "cut", "styleselect", "bold", "italic", "alignleft", "aligncenter", "alignright", "bullist", "numlist", "link", "umbmediapicker", "table", "umbembeddialog"],
stylesheets: ["rte"],
dimensions: { height: 400 },
valueType:"STRING"
}
}
};
});
Render
#inherits Umbraco.Web.Macros.PartialViewMacroPage
<div class="lh-text">
#Model.MacroParameters["macroRte"];
</div>
Any ideas? :)
using this, https://github.com/engern/Umbraco-custom-macro-parameters/tree/master/App_Plugins/MacroRichText - I was able to solve my problem.
The view needs to be changed to the following
<div ng-controller="CustomSectionEditController">
<ng-form>
<umb-editor model="macroRte"></umb-editor>
</ng-form>
</div>
The controller needed the following code (add under view
value: $scope.model.value,
and an additional scope control
$scope.$watch("macroRte.value", function (newValue, oldValue) {
$scope.model.value = newValue;
});
The controller now looks like this
angular.module("umbraco").controller("CustomSectionEditController", function ($scope) {
$scope.macroRte = {
label: 'bodyText',
description: 'Load some stuff here',
view: 'rte',
value: $scope.model.value,
config: {
editor: {
toolbar: ["code", "undo", "redo", "cut", "styleselect", "bold", "italic", "alignleft", "aligncenter", "alignright", "bullist", "numlist", "link", "umbmediapicker", "table", "umbembeddialog"],
stylesheets: ["rte"],
dimensions: { height: 400 },
valueType:"STRING"
}
}
},
$scope.$watch("macroRte.value", function (newValue, oldValue) {
$scope.model.value = newValue;
});
});
I hope this help others.
I have a modal in Ionic that shows a list of country flags for the user to choose, however my ng-click on the language flag don't appear to fire the $scope.function() I have assigned. Here's what I've got:
Showing the modal:
$scope.showLanguages = function() {
var myPopup = $ionicPopup.show({
templateUrl: 'templates/languageSelect.html',
title: 'Language Select',
scope: $scope,
buttons: [
{
text: '<b>Close</b>',
type: 'button-positive',
onTap: function (e) {
return;
}
}
],
cssClass: 'animated bounceInDown'
});
}
My template that displays my flags, with the ng-click on them:
<div class="row">
<button ng-class="getFlagClass(language)" ng-click="setLanguage()" class="col flag-icon flag-icon-squared" ng-repeat="language in data.languages" />
</div>
And finally my ng-click function which is on the same scope as the one that opens the modal (notice the $scope being passed into the modal)
$scope.setLanguage = function() {
alert('test');
}
Can anyone suggest what I might be doing wrong here? This looks like a bug in Ionic but I could be wrong.
Thanks
It turns out it WAS working, but the alert wasn't being shown... I suspect this is because it was within a modal? I don't know.
Anyway, there's nothing wrong with the above code after all.
I have a table with a list of records on the main landing page.
We can click records from the table to open a bootstrap modal for detail view.
I want to access the main landing page table to open another bootstrap modal, I mean opening and keeping two of them simultaneously.
I have achived this using angular-kendo window , Now able to open multiple popup.
http://plnkr.co/edit/BE6ADurYGqikkcNKQVl7?p=preview
var windowInstance = $kWindow.open({
options:{
modal: false,
title: "Window title",
height: 150,
width: 400,
visible: false
},
templateUrl: 'modal1.html',
controller: 'modalController',
resolve: {
parameter1: function () {
return "Test...";
}
}
});
windowInstance.result.then(function (result) {
// Here you can get result from the window
});
I want to open one $mdDialog on top of the other. If possible, have unlimited overlapping dialogs.
Any ideas?
UPDATE: As per #Magnus, it was updated to multiple as of v1.1.2
Add skipHide: true to the second dialog's options object.
This works for me: http://webiks.com/mddialog-with-a-confirmation-dialog/
Gabriel Anzaldo Alvarado gave the right answer in my opinion, the correct answer is shared in a Plunker link. But as requested by many users, I'm adding the actual code in case the link becomes unavailable in the future.
Basically, while opening your dialog using the .show({}) function, add the option skipHide: true.
HTML
<body>
<div ng-controller="AppCtrl as ctrl"
ng-cloak=""
class="virtualRepeatdemoVerticalUsage"
ng-app="MyApp">
<md-content layout="column">
<md-button ng-click="ctrl.moreInfo(1)">
Open Dialog
</md-button>
</md-content>
</div>
</body>
JavaScript
(function () {
'use strict';
angular
.module('MyApp', ['ngMaterial'])
.controller('AppCtrl', function ($interval, $mdDialog) {
var vm = this;
vm.moreInfo = function moreInfo(thing) {
$mdDialog.show({
controllerAs : 'dialogCtrl',
clickOutsideToClose : true,
bindToController : true,
controller : function ($mdDialog) {
this.click = function click() {
$mdDialog.show({
controllerAs : 'dialogCtrl',
controller : function ($mdDialog) {
this.click = function () {
$mdDialog.hide();
}
},
preserveScope : true,
autoWrap : true,
skipHide : true,
template : '<md-dialog class="confirm"><md-content><md-button ng-click="dialogCtrl.click()">I am in a 2nd dialog!</md-button></md-content></md-dialog>'
})
}
},
autoWrap : false,
template : '<md-dialog class="stickyDialog" data-type="{{::dialogCtrl.thing.title}}"><md-content><md-button ng-click="dialogCtrl.click()">I am in a dialog!</md-button></md-content></md-dialog>',
locals : {
thing : thing
}
})
}
});
})();
The code above worked for me.
As noted by Vincenzo in another answer, while stacking mdDialogs, the dialogs beneath will not grey-out, there is a CSS trick to solve that: https://stackoverflow.com/a/38013682/366662
UPDATE
This answer works for version 1.1.1, from version 1.1.2 the Material team changed the property from skipHide to multiple. So, be careful when copy-pasting the snippet. Check your Material version and use the correct property accordingly.
No, it is not possible right now to have multiple $mdDialog. Honestly I really need this feature and tried it to get it to work but no success so far. Lets hope they allow this feature in future releases. Although there is discussion here, you can find something useful there.
NOTE: This is no longer the correct answer, as opposed to the time period it was answered, look below for more answers.
As Gabriel Anzaldo Alvarado wrote in the comment, it is possible as you can see on this Plunker:
http://plnkr.co/edit/Ga027OYU5nrkua3JxNRy?p=preview
In addition, you can add some css classes to get the same background grey overlay:
https://github.com/angular/material/issues/7262
._md-dialog-backdrop:nth-of-type(even) {
z-index: 81;
}
._md-dialog-backdrop:nth-of-type(odd) {
z-index: 79;
}
.md-dialog-container:nth-of-type(even) {
z-index: 80;
}
.md-dialog-container:nth-of-type(odd) {
z-index: 82;
}
UPDATE:
From Angular Material v1.1.2 the option skipHide has been replaced by multiple.
skiphide has been deprecated. Use multiple key instead. See documentation here
here is a code snippet
myCtrl.demoClick = function moreInfo(thing) {
$mdDialog.show({
controllerAs: 'dialogCtrl',
clickOutsideToClose: true,
bindToController: true,
controller: function ($mdDialog) {
this.click = function click() {
$mdDialog.show({
preserveScope: true,
multiple: true,
controllerAs: 'dialogCtrl',
controller: function ($mdDialog) {
this.click = function () {
$mdDialog.hide();
}
},
template: '<md-dialog class="confirm"><md-content>I am in a 2nd dialog!<md-button class="md-raised" ng-click="dialogCtrl.click()">Confirm!</md-button></md-content></md-dialog>'
})
}
},
autoWrap: false,
template: '<md-dialog class="stickyDialog" data-type="{{::dialogCtrl.thing.title}}"><md-content>I am in a dialog!<md-button class="md-raised" ng-click="dialogCtrl.click()">Click me to do something</md-button></md-content></md-dialog>',
locals: {
thing: thing
}
})}
Here is a workaround to have nested dialogs.
The idea is when the second is open save the state of the first, and when the second is closed launch the first dialog again.
From Angular Material version 1.1.2 an above: Use option multiple.
Use option skipHide for previous versions.
Example
$mdDialog.show({
template: 'asdf'
controller: "xyzController",
multiple: true // Replace with "skipHide" on Angular Material 1.1.1 or before
})
I got this to work with very little effort and a bit of angular hacking.
To make things clear, I'm using Angular v1.5.3 & Angular Material v1.0.6.
With previous versions if you add skipHide: true to your dialog definition object, it will allow multiple dialogs. Your issue then comes to the cancel button which will close the wrong dialog box.
The solution is rather calling $mdDialog.cancel we want to call $mdDialog.hide as it correctly resolves the right dialog box. Rather than making sure you have setup every instance correctly, or even making sure 3rd party libs also follow this pattern, we can decorate the $mdDialogProvider.
$provide.decorator
$provide.decorator(name, decorator);
Register a service decorator with the $injector. A service decorator intercepts the creation of a service, allowing it to override or modify the behavior of the service. The object returned by the decorator may be the original service, or a new service object which replaces or wraps and delegates to the original service.
angular.module('module').config(function($provide) {
$provide.decorator('$mdDialog', function($delegate) {
var methodHandle = $delegate.show;
function decorateDialogShow() {
var args = angular.extend({}, arguments[0], {
skipHide: true
});
return methodHandle(args);
}
$delegate.show = decorateDialogShow;
$delegate.cancel = function() {
return $delegate.hide(null);
}
return $delegate;
});
});
The above will simply replace the cancel method, with the existing and working hide method. Also sets a global default so that skipHide is set initially on all dialog boxes.
Winner winner!
$mdDialog.show({
parent: angular.element(document.body),
templateUrl: 'template.html',
clickOutsideToClose: true,
fullscreen: true,
preserveScope: true,
autoWrap: true,
skipHide: true,
controllerAs: 'customDialog',
controller: function ($mdDialog) {
this.callNewDialog = function (dialogCallback) {
dialogCallback();
};
}});
call in view:
ng-click="customDialog.callNewDialog(vm.addNewCustomer)"
and vm.addNewCustomer will be a function that open new dialog
Yes it's possible, just add "skipHide: true" where you calling mdDialog..
just like:
$scope.xyz = function(anything) {
$mdDialog.show({
controller: "xyzController",
skipHide: true,
templateUrl: 'path-to-partial/xyzDialog.html',
parent: angular.element(document.body),
clickOutsideToClose: true
})
}
Update: this is for angularJs (Angular 1)
Actually you can use mdPanels. Little snippet:
return $q(function(resolve, reject){
$mdPanel.open(Object.assign({
hasBackdrop: true,
zIndex: 85, //greater than modal and lower than autocomplete\select
locals: Object.assign({
onClose: resolve
}, locals),
template: getCommonTemplate(template, heading),
bindToController:true,
controller: 'PanelDummyController as $ctrl',
panelClass: 'rl-modal-panel',
position: $mdPanel.newPanelPosition()
.absolute()
.center()
}))
});
controller('PanelDummyController', function (mdPanelRef) {
'ngInject';
const close = () => mdPanelRef.close().then(() => {
this.onClose(Object.assign({}, this));
});
this.$mdDialog = {
cancel: close,
hide: close
};
});
and add little styling to class.
It's not fully copy of modal, but it's quite good implementation and could be improved to fully copy.
in the latest AngularJs Material dialog, you can find this solution:
https://material.angularjs.org/latest/api/service/$mdDialog#multiple-dialogs
It uses multiple dialog preset or configuration.
Absolutely not possible.* for now. It is understandable for some situations but other way is needed too.
So, I preferred to use custom popup dialogs variates for same functionalities.
Otherwise md-dialog gives pain to doing job.
Yes I did that but if 3 nested needed then writing code ok but another one can not understand it.
You can do the job by giving scope and preservescope parameters then manage when to close and which to open next ...brrrr...
I am using AngularJS Modal Service. http://fundoo-solutions.github.io/angularjs-modal-service/
I setup it in a simple way
Button to open a Model
<div data-ng-controller="contest as vm">
<a class="btn btn-primary" data-ng-click="vm.createFileUploadDialog()">Upload Image</a>
</div>
Inisde Controller I have a function defined createFileUploadDialog and expose it from my viewModel.
vm.createFileUploadDialog = createFileUploadDialog;
vm.uploadme = {};
vm.uploadme.src = "";
function createFileUploadDialog() {
createDialog('/app/templates/fileuploadDialog.html', {
id: 'filuploadDialog',
title: 'Upload Contest Image',
backdrop: true,
success: { label: 'Upload', fn: uploadSuccess },
cancel: { label: 'Cancel' },
});
}
function uploadSuccess() {
console.log(vm.uploadme);
//need to call to the backend
}
And inside "fileUploadDialog.html" I have a simple markup
<div>
<input type="file" fileread="uploadme.src" />
</div>
"fileread" is a directive which return back the src of the File. Now the problem I have
As you can see I am doing console.log inside "UploadSuccess", in response I am getting the result "Object {src: ""}",
It looks like the Modal values not capture inside controller. But If I do the same with $rootScope, it logs out the File that need to upload. So, how can I access the value without using $rootScope? Please suggest
PS:
I am not define separate controller for Modal, want to use the same controller that treats my view.
** Modals scope is not the same as your controller scope!**
if you want to see your Controller scope inside of your modal and manupulate it , you're gonna have to use resolve inside of your modal markap like this :
createDialog('/app/templates/fileuploadDialog.html', {
id: 'filuploadDialog',
title: 'Upload Contest Image',
backdrop: true,
success: { label: 'Upload', fn: uploadSuccess },
cancel: { label: 'Cancel' },
resolve:{
controllerscope:function(){
return $scope;
}
}
});
And now , inside of your modal controller you can inject :** controllerscope ** and use it , also data binding works well like this :
app.controller('modalcontroller',function($scope,controllerscope){
// no you have access to your controller scope with **controllerscope**
})
So go and have a look at your modal plug in wich you are using and search for resolve and controller
thats it