将对象属性链接到值的最佳方法是什么？

Question

My question is related to a directive that I have refactored:

HTML

<!-- Before -->
<slider value="sliderValue" floor="0" ceil="maxPrice"></slider>

<!-- New version -->
<slider value="sliderValue" options="sliderOptions"></slider>

<!-- Both directives use '=' bindings... -->

JS

$scope.sliderValue=0;
$scope.maxPrice = 1000;

$scope.sliderOptions = {
    floor: 0,
    ceil: $scope.maxPrice
};

//later
$scope.maxPrice = 2000;

With the old version, I could update $scope.maxPrice , and it would automatically update the scope value of ceil in the directive. I would like to achieve the same with the new version.

The first idea to come to my mind is using a $watch on $scope.maxPrice , but I have read many people explaining that using $watch is a bad practice.

Then, I could update $scope.sliderOptions.ceil manually every time I update $scope.maxPrice but this is quite annoying.

NB $scope.maxPrice is a business-logic value used in several places of the application while $scope.sliderOptions is only used for the slider directive.

Answer 1

After giving it some thought and discussion I guess you're limited to wrapping maxprice in an simple object. The reason to do so would be because JavaScript can't pass numbers by reference. More information on the topic: Is there thing like pass by value pass by reference in JavaScript?

Proposed solution

$scope.sliderValue=0;
$scope.maxPrice = {value: 1000};

$scope.sliderOptions = {
    floor: 0,
    ceil: $scope.maxPrice
};

//later
$scope.maxPrice.value = 2000;