two way binding with ui library controls

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

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

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?

Copy Link
Markus Johansson 1938 posts 5866 karma points MVP 2x c-trib

Jan 21, 2024 @ 14:46

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.

Copy Link

David Jazbec 22 posts 144 karma points

Jan 21, 2024 @ 22:19

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>

Copy Link

Markus Johansson 1938 posts 5866 karma points MVP 2x c-trib

Jan 22, 2024 @ 10:36

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

Copy Link
Bjarne Fyrstenborg 1285 posts 4039 karma points MVP 8x c-trib

Jan 22, 2024 @ 13:57
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.
Copy Link
David Jazbec 22 posts 144 karma points

Jan 22, 2024 @ 21:50

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!

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?