如何使用属性参数在AngularJS中设置模型的属性？

Question

我正在尝试在AngularJS中构建可重复使用的指令（UI滑块）。 但是我需要多个滑块，因此滑块的一个属性应该是绑定到的属性。 我当时在考虑有一个名为“属性”的属性，该属性在更改滑块时会被更新，但是我不确定语法或在进行侦听时如何监听该属性。

谁能指出我正确的方向？

Answer 1

最重要的是，您应该使用隔离范围声明指令，以便可以同时使用具有不同属性值的指令的多个实例。 此外，要观察何时发生了更改，请在链接函数中放置一个$ watcher：

.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;
            });
        }
    }
});

在HTML中，您可以这样声明：

<slider property="person.age" />

其中person.age是要传递到滑块的作用域变量。