Copied to clipboard

Flag this post as spam?

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


  • Damian Green 452 posts 1433 karma points
    Oct 20, 2014 @ 20:55
    Damian Green
    0

    How to bind to a value on another model / controller (or html element)

    In its simples form - how do i bind a property on a model to an html element (a drop down list)?

    i want the property editor to update itself when another property changes (a dropdownlist).

    I have been looking at the watch and angular.element but cant suss it.

    I was also looking at the bind also:

    $scope.dropdown = angular.element($('#category-dropdown'));
    
            $scope.dropdowns.change = function() {
                console.log('dropdown changed');
            }
    

    im pretty new to angular so may be barking up the wrong tree here.

    Any ideas how to do this?

    Cheers Damian

  • Doron Uziel 23 posts 93 karma points
    Oct 20, 2014 @ 21:36
    Doron Uziel
    0

    If I understand correctly you wish to listen to changes within another scope that is not the one created for your property editor. am I correct?

    Is the other controller a part of your own code or are you trying to listen to a change in a third party property editor.

    If its your own code you might want to use $rootScope.$broadcast to publish an event whenever the property has changed.

    within your html:

    <select ng-change="foo".... ng-model="bar"></select>,
    

    the controller for this select:

    angular.module("umbraco").controller("fooCtrl",function($scope,$rootScope){
                ...
                 $scope.foo=function(){
                       $rootScope.$broadcast("foo.changed",{data:$scope.bar});
                  }
                ...
    
    });
    

    Then within the "listenning controller":

    $scope.$on("foo.changed",function(event,data){.... })
    

    a very similair approach is to use the events Service

    If on the other hand you want to listen to changes in a third party property editor then its a little bit more complicated and brittle. If this is absolutely necessary I would first check to see if any event is broadcasted when the item you want to watch has changed. If not then as a last resort you should bind to the element change event directly.

    angular.module("umbraco").run(function($rootScope){
          var elm=angular.element('#category-dropdown');
          elm.change(function(){
                var val=elm.val();
                  $rootScope.$broadcast("foo.changed",{data:val});  
           });
    });
    

    I am not very happy about this as it but I can't think of any other suggestion.

  • Damian Green 452 posts 1433 karma points
    Oct 21, 2014 @ 01:24
    Damian Green
    0

    Hi Doron!

    Thats for that - i will give it a try tomorrow and let you know if it worked for me! :)

    You were correct in your understanding. I am basically having two properties - one a dropdown and the other a generated list built using the value of the dropdown and i want the generated list to reload on change of the dropdown.

    I had been using the contentEditingHelper.getAllProps(editorState.current) to get the array of properties ona node and using the alias to grab it but guess the value could be passed in the event? I'll take a look...

    Thanks again for chiming in.

    Damian

  • Warren Buckley 2106 posts 4815 karma points MVP ∞ admin hq c-trib
    Oct 27, 2014 @ 10:06
    Warren Buckley
    0

    Hi Guys,
    My thought is why not make this a single property editor. Is there a real need for the two values to be separate?

    It sounds like the choice chosen in the drodpdown/select allows me to pick a value from another list. Personally from a UX point of view I would say it makes sense for this to be one item. As it sounds to me you will never use the first value for anything apart from filtering your second list.

    With the dropdown being in the same property this will then be so much easier for you, and in my opinion a nicer & more designed & thought about editor experience.

    Cheers,
    Warren

  • Damian Green 452 posts 1433 karma points
    Oct 27, 2014 @ 11:03
    Damian Green
    0

    Hi,

    I managed to get it working great as the 2 property editors - ive just not had time to come back and post it up here - i will asap.

    When i started creating it Warren, it started out life as a single property editor but i believe it to be 1 property 1 field? I need to store the value from both the dropdown and the generated field - which also gets regenerated upon publish. This is my first ever property editor in v4-6 and v7 and first foray into angular so learning as i go here.

    Is the way to multiple items to serialize an object into a single string and into the property value - and back out again to display?

    I think in this instance it is still better for me to have the 2 property editors as i will still use the value from the dropdown in its own right - and the fact the dropdown simply publishes it event without knowing about anything attached to it, it has a really nice clean uncoupled way of talking to other properties.

    I will add the solution i came to as soon as i get a spare 10mins.

    Cheers, Damian

  • Doron Uziel 23 posts 93 karma points
    Oct 27, 2014 @ 12:05
    Doron Uziel
    0

    Damian,

    I have to agree with Warren. If both these editors are inseparable then it would make sense to keep them within the same editor.

    Your model can be a complex javascript object and would be serialized into JSON when saved.

    So you can proably do something like this

    <select .. ng-model="model.foo"/> /* Here you Chnage the value of the dependency */
    ....
    <select ng-model="model.bar"/>/* Here is the dependent value */
    

    and your actual model will be serialized into {"foo":val1, "bar": val2}

    You can then use for your frontend a custom PropertyValueConverter which will deserialize this into your custom strongly typed model, or just rely on the default converter which delivers this property as a C# JsonObject.

    Hope this makes sense

Please Sign in or register to post replies

Write your reply to:

Draft