Copied to clipboard

Flag this post as spam?

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


  • David Jazbec 22 posts 144 karma points
    Jan 20, 2024 @ 23:40
    David Jazbec
    0

    Two way binding with UI Library controls

    Hello everyone,

    I am developing a simple Umbraco extension and I want users to be able to change some settings via a custom dashboard.

    I have created a dashboard using the Umbraco UI library controls (<uui-***>).

    Now displaying the values is no problem, but I am stuck on binding them so that any changes are reflected back to the AngularJS controller (two way binding).

    The ng-model directive does not work as it does on a simple <input> element.

    Im not sure how I should go about this. Are there any good examples of mixing the UI library with AngularJS?

  • Markus Johansson 1936 posts 5864 karma points MVP 2x c-trib
    Jan 21, 2024 @ 14:46
    Markus Johansson
    0

    Hi!

    Sounds like a good idea to base new extensions for the current Umbraco-version on Lit to make the migration to Umbraco 14 easier.

    As far as I know you probably have two options:

    1. Use component hand subscribe to events from the component to “manually” update you model.

    If you component fire a “change” event you should be able to handle it with ng-change=“”.

    2. Build your own directives to provide the 2-way data binding (much like what the ng-model does). I think that this is probably overkill if you don’t use it in a lot of places.

  • David Jazbec 22 posts 144 karma points
    Jan 21, 2024 @ 22:19
    David Jazbec
    0

    Yes, it seemed like a good idea to check out the UI library before Umbraco 14 arrives.

    I have tested a few things with ng- directives but it does not work all the time or with all lit components. I ended up with this, which is what you suggested...

    $scope.toggle = function (propName){
        let currentValue = vm.settings[propName];
        vm.settings[propName] = !currentValue;
    };
    

    And then calling the function....

        <uui-toggle label="Keep original images" label-position="left" 
                    onchange="angular.element(this).scope().toggle('WpaKeepOriginals')" 
                    ng-attr-checked="{{vm.settings.WpaKeepOriginals ? 'checked' : undefined}}">
        </uui-toggle> 
    
  • Markus Johansson 1936 posts 5864 karma points MVP 2x c-trib
    Jan 22, 2024 @ 10:36
    Markus Johansson
    1

    Hi David!

    Thanks for sharing!

    I think this is more or less what you need to do. You could probably use a method to handle the event to avoid the angular.element(this)-part but as long at it works - it works =D

    // Markus

  • Bjarne Fyrstenborg 1284 posts 4038 karma points MVP 8x c-trib
    Jan 22, 2024 @ 13:57
    Bjarne Fyrstenborg
    100

    Hi David

    Have you tried something like this?

    <uui-toggle
        ng-on-change="vm.toggle()"
        ng-attr-checked="{{vm.settings.WpaKeepOriginals ? 'checked' : undefined}}">
    </uui-toggle>
    

    where vm refer to this in controller.

    const vm = this;
    
    vm.toggle = function (){
        ...
    };
    

    The events in UI library need to be prefixed with ng-on- in Angular, so:

    • @click -> ng-on-click
    • @change -> ng-on-change

    etc.

  • David Jazbec 22 posts 144 karma points
    Jan 22, 2024 @ 21:50
    David Jazbec
    0

    Hi Bjarne,

    I have now, since you mentioned it :)

    Works like a charm, I will stick with it, it looks much better.

    Thanks guys!

Please Sign in or register to post replies

Write your reply to:

Draft