Using $scope.$watch in AngularJS to create dependency between objects?

Question

vm.Parameters is a list of Parameter objects (vm is an alias for the controller).

Each Parameter has at least these 3 properties (to keep it simple):

param.Name
param.Dependensies
param.Values

Parameter may have dependency on another Parameter, for example, we have 3 parameters (Country, Region and City).

Region depends on Country, and City depends on Region and Country, like this:

vm.Parameters['Region'].Dependencies = ['Country'];  
vm.Parameters['City'].Dependencies = ['Country', 'Region'];

When I render UI, I generate dropdowns for each parameter.
When country is selected, I need to populate Region dropdown with regions of selected country.
When region is selected, I need to populate City dropdown with cities of selected region and country.

Question: I want to know if it is possible to use $scope.$watch so that each child parameter watches for changes in parent parameters (param.Values property), listed in param.Dependencies.

I am not sure how exactly this should be implemented.

I added this function to the controller, that loops thru all the parameters in the list, and for each parameter it loops thru all the dependencies (names of parent parameters this parameter depends on, like Country and Region for City)

cascadeReportParameters() {
    for (let param of this.reportParameters) {
        for (let parentParam of param.Dependencies) {
            this.$scope.$watch(parentParam, function (newValue, oldValue) {
                this.getDependentParameterValues(param);
            });
        };
    }
}

This function doesnt work.

According the documentation, first param is a string name of controller's property being watched.

So, if I had a property Property1, I could write

this.$scope.$watch('Property1', function (newValue, oldValue){}

However in my case I need to watch for Parameters['SomeName'].Values and I dont know how to set this watch. I am not sure what should be the first parameter to $watch function.

Any help is appreciated.

Community · Accepted Answer · 2017-05-23 12:24:59Z

0

When used that way, $watch expects a scope variable. Notice the string notation in this example:

$scope.somevariable = 1;
$scope.$watch('somevariable', function(vNew, vOld) {
    alert('somevariable has changed');
});

But you can watch a function instead. When watching a function, the watch is set on the function's return value, which can be anything and does not need to be a scope variable:

$scope.$watch(function(){
    // return whatever value you'd like to watch
    return Parameters['SomeName'].Values;  
}, function(vNew, vOld) {
    alert('The watch value has changed');
});

Hope that helps. Note that the function watch will be called multiple times per digest, which could potentially create performance issues.

EDIT: This answer: add watch on a non scope variable in angularjs also shows a bind syntax that might help further readability for controllerAs syntax, but it shouldn't be necessary.

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Feb 2, 2017 at 17:35

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Slava Over a year ago

the problem is what should be in 'somevariable' - that is my question, I need to monitor Parameters['SomeName'].Values

Slava Over a year ago

Parameters is the property of the controller that contains all the data

Dan Over a year ago

I told you how to do what you're asking. Did you read my answer? Specifically look at the second block of code...

Collectives™ on Stack Overflow

Using $scope.$watch in AngularJS to create dependency between objects?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related