いくつかの異なる方法を試したり、単純な jquery-ui スライダーをラップしたりしました。その最初の方法は次のとおりです。
//Slider control
TDApp.directive("tdControlSlider", ["TDSV", function (TDSV) {
return {
scope: {
property: "=",
min: "=",
max: "=",
step: "="
},
restrict: "E",
replace: true,
templateUrl: TDSV.TEMPLATE_PATH + "Controls/Slider.htm",
link: function (scope, elem, attrs) {
scope.sliderElem = elem.find(".sliderDiv").first();
scope.sliderElem.slider({
min: scope.min,
max: scope.max,
step: scope.step,
slide: function (event, obj) {
scope.property = obj.value;
scope.$apply()
console.log(obj.value);
console.log(scope.property);
}
});
}
};
}]);
シャドウイングのためにこれが機能しないと想定したため、代わりにオブジェクトへの参照とそのプロパティの 1 つの文字列値を渡すことにしました。
//Slider control
TDApp.directive("tdControlSlider", ["TDSV", function (TDSV) {
return {
scope: {
object: "=",
property: "@",
min: "=",
max: "=",
step: "="
},
restrict: "E",
replace: true,
templateUrl: TDSV.TEMPLATE_PATH + "Controls/Slider.htm",
link: function (scope, elem, attrs) {
scope.sliderElem = elem.find(".sliderDiv").first();
scope.sliderElem.slider({
min: scope.min,
max: scope.max,
step: scope.step,
slide: function (event, obj) {
scope.object[scope.property] = obj.value;
scope.$apply()
console.log(obj.value);
console.log(scope.object[scope.property]);
}
});
}
};
}]);
どちらの場合も、コンソールには期待値が表示されますが、モデルは更新されません。通常、これは値がスコープ間でシャドーイングされていることを意味していました。そのため、2 番目のバージョンに変更しましたが、それも機能しません。何か案は?