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.

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

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

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

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

is working on a reply...