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?
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.
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;
};
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
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-modeldirective 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?
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.
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...And then calling the function....
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
Hi David
Have you tried something like this?
where
vmrefer tothisin controller.The events in UI library need to be prefixed with
ng-on-in Angular, so:@click->ng-on-click@change->ng-on-changeetc.
Hi Bjarne,
I have now, since you mentioned it :)
Works like a charm, I will stick with it, it looks much better.
Thanks guys!
is working on a reply...
This forum is in read-only mode while we transition to the new forum.
You can continue this topic on the new forum by tapping the "Continue discussion" link below.