Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Marco Teodoro 69 posts 144 karma points
    Jan 30, 2019 @ 10:42
    Marco Teodoro
    0

    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.

    (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:

    1. 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?
    2. 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.

    Cheers, Marco

  • Alex Skrypnyk 6050 posts 23163 karma points MVP 5x admin c-trib
    Jul 23, 2020 @ 22:02
    Alex Skrypnyk
    0

    Hi Marco

    Did you find a solution to this?

    Alex

  • Marco Teodoro 69 posts 144 karma points
    Jul 24, 2020 @ 14:06
    Marco Teodoro
    0

    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.

  • Anders Bjerner 456 posts 2687 karma points MVP 5x admin c-trib
    Jul 23, 2020 @ 23:26
    Anders Bjerner
    1

    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:

    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 to compare the key, and only trigger an update of the view when they match.

  • Marco Teodoro 69 posts 144 karma points
    Jul 24, 2020 @ 14:06
    Marco Teodoro
    0

    Interesting! Is this available for v7 as well or only for v8?

  • Anders Bjerner 456 posts 2687 karma points MVP 5x admin c-trib
    Jul 24, 2020 @ 14:45
    Anders Bjerner
    0

    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 😉

  • Marco Teodoro 69 posts 144 karma points
    Jul 24, 2020 @ 15:31
    Marco Teodoro
    0

    Thanks Anders. I don't need this right now but always good to know.

    Cheers, Marco

  • Rogelio McClelland 1 post 71 karma points
    Aug 31, 2021 @ 12:27
    Rogelio McClelland
    0

    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.

  • Paria Shiri 12 posts 76 karma points
    Aug 31, 2021 @ 08:29
    Paria Shiri
    0

    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!

Please Sign in or register to post replies

Write your reply to:

Draft