I've a few custom sections with editors and dialogs i thought they were working fine but yesterday i found a problem with the way i'm codding the dialogs and the editors.
Atm i've an editor view, one js controller and inside this js controller i've a few tabs with listviews. First question is how would you make the listview load only when the tab is visible or selected instead of loading all the list views on the controller constructor?
Second question is how to use a custom controller for the dialog and communicate back to the main controller to refresh the changes we did on the dialog controller. My problem now is that i'm using the same controller on the dialog and on the editor and this is making the controller to be reinitialized and load on the information from server when i don't need it, but i still want to refresh from database when i close the dialog.
(function () {
"use strict";
//controller
function editorController($scope, $routeParams, $http, myResource {
function onInit() {
$scope.refreshListView();
}
$scope.refreshListView= function () {
$scope.listviewData = myResource.getListViewData();
}
$scope.openOverlay= function () {
//this will open the overlay that is created inside the editor html file
$scope.overlay = {
model: model,
view: "../App_Plugins/../Dialog.html",
title: "TITLE",
show: true,
ubmitButtonLabel: "Save",
submit: function (model) {
// myResource.Post(model)
//$scope.refreshListView()
}
}
onInit();
}
angular.module("umbraco").controller("MySection.editorController", editorController);
})();
This is a sample of what i have. So the dialog and the editor both shares the same controller. I saw something about using the dialog service. Does any one have a sample that i can look at?
Basically what i'm trying to achieve is this:
Editor :1 html view, with the tabs and list views (if possible tell me how to load the list views only when tab is visible, or load on tab click) and a the corresponding js controller. Is it possible to have 1 controller for each tab? Is this the proper way to do this?
edit/create grid item on a dialog and leave all this logic outside the main controller. When complete, call a function in the editor controller to refresh the list view.
I thought i could make a window.location, or window reload but that's a kind of hacks i'm trying to avoid. :)
i hope this is a common issue and someone else already has the correct solution for this.
Hi Alex. This is was a long time ago, and I was looking for a solution for v7. I'm now using the infinitive editor, with a controller for each dialog. And I'm not using tabs anymore so replying to your question no I didn't found a solution for what I was looking for.
It might be a bit late with a reply, but Umbraco has the eventsService that you can use in Angular.
I recently had a case where one directive has an item in it's scope, and that directive may make changes to the item and then notify others components about the change via the emit function:
The first argument is the name of the event, so in my case it's elements.updated.
Other components can then use the on method to listen for changes on the same event:
eventsService.on("elements.updated", function (_, args) {
if (args.item.value.key !== $scope.item.value.key) return;
$scope.update();
});
The first argument is the event object it self (I'm using _ as I had no use for that in my case), and the second argument is the object I passed on to the emit function.
Notice that the event is called when any of my items are updated, so I added a check to compare the key, and only trigger an update of the view when they match.
I only saw that your question was targeted Umbraco 7 after I had posted. My use case was Umbraco 8.
But I had a look at the source code for eventsService, and it doesn't appear to have changed much since Umbraco 7. So I think it will work there as well 😉
eventsService.emit("elements.updated", {
item: scope.item }); The first argument is the name of the event, so in my case it's elements.updated.
Other components can then use the on method to listen for changes on
the same event:
eventsService.on("elements.updated", function (_, args) {
if (args.item.value.key !== $scope.item.value.key) return;
$scope.update(); }); The first argument is the event object it self (I'm using _ as I had no use for that in my case), and the second
argument is the object I passed on to the emit function.
Notice that the event is called when any of my items are updated, so I
added a check MyBalanceNow to compare the key, and only trigger an update of the
view when they match.
Hello,
Thanks for the update and quick reply. I'll be sure to keep an eye on this thread. Looking for the same issue. Bumped into your thread. Thanks for creating it. Looking forward for solution.
Hi,
could you provide some explanation for using eventsService.emit?
I want to emit a listener to a MediaPicker, I searched everywhere there is no guide!
how to communicate between angular controllers
Hi community.
I've a few custom sections with editors and dialogs i thought they were working fine but yesterday i found a problem with the way i'm codding the dialogs and the editors.
Atm i've an editor view, one js controller and inside this js controller i've a few tabs with listviews. First question is how would you make the listview load only when the tab is visible or selected instead of loading all the list views on the controller constructor?
Second question is how to use a custom controller for the dialog and communicate back to the main controller to refresh the changes we did on the dialog controller. My problem now is that i'm using the same controller on the dialog and on the editor and this is making the controller to be reinitialized and load on the information from server when i don't need it, but i still want to refresh from database when i close the dialog.
This is a sample of what i have. So the dialog and the editor both shares the same controller. I saw something about using the dialog service. Does any one have a sample that i can look at?
Basically what i'm trying to achieve is this:
I thought i could make a window.location, or window reload but that's a kind of hacks i'm trying to avoid. :)
i hope this is a common issue and someone else already has the correct solution for this.
Cheers, Marco
Hi Marco
Did you find a solution to this?
Alex
Hi Alex. This is was a long time ago, and I was looking for a solution for v7. I'm now using the infinitive editor, with a controller for each dialog. And I'm not using tabs anymore so replying to your question no I didn't found a solution for what I was looking for.
It might be a bit late with a reply, but Umbraco has the
eventsService
that you can use in Angular.I recently had a case where one directive has an item in it's scope, and that directive may make changes to the item and then notify others components about the change via the
emit
function:The first argument is the name of the event, so in my case it's
elements.updated
.Other components can then use the
on
method to listen for changes on the same event:The first argument is the event object it self (I'm using
_
as I had no use for that in my case), and the second argument is the object I passed on to theemit
function.Notice that the event is called when any of my items are updated, so I added a check to compare the key, and only trigger an update of the view when they match.
Interesting! Is this available for v7 as well or only for v8?
I only saw that your question was targeted Umbraco 7 after I had posted. My use case was Umbraco 8.
But I had a look at the source code for
eventsService
, and it doesn't appear to have changed much since Umbraco 7. So I think it will work there as well 😉Thanks Anders. I don't need this right now but always good to know.
Cheers, Marco
Hello,
Thanks for the update and quick reply. I'll be sure to keep an eye on this thread. Looking for the same issue. Bumped into your thread. Thanks for creating it. Looking forward for solution.
Hi, could you provide some explanation for using eventsService.emit? I want to emit a listener to a MediaPicker, I searched everywhere there is no guide!
is working on a reply...