How can I set a property of a model in AngularJS using an attribute parameter?

Question

I'm trying to build a directive in AngularJS that can be reused (a UI slider). But I need multiple sliders, so one attribute of the slider should be the property that it is bound to. I was thinking of having an an attribute called "property" which on changing the slider would then get updated, but I'm not sure of the syntax or when doing the listen, how to listen on that property.

Can anyone point me in the right direction?

Answer 1

The most important thing is that you should declare your directive with isolate scope so that multiple instances of your directive can be used at the same time with different property values. In addition, to watch when something has changed, put a $watcher in your link function:

.directive("slider, function(){
    return {
        restrict : 'AE',
        scope : {
            property : '='
        },
        template : '.... your template....',
        link : function(scope, elem, attr){

           ... other code if you have it...

           // Watch for changes in the property variable
            scope.$watch('property', function(newVal){
                console.log('Do something with ' + newVal;
            });
        }
    }
});

In the HTML, you would declare it like this:

<slider property="person.age" />

Where person.age is a scope variable that you're passing into the slider.