我有两个滑块,一个用于亮度,另一个用于对比度。随后,它们附加到“亮度”模型和“对比度”模型。这些滑块位于选项卡界面中,只要选项卡更改,值就会重置。我决定创建一个工厂服务来存储值,并希望在滑块更改时随时使用新值更新工厂。我知道滑块模型正在更新,因为每个滑块旁边都有一个框显示模型的当前值。在服务设置值之后似乎控制台日志一次,但之后从不记录。
控制器代码:
'use strict';
angular.module('oct').controller('LeftCtrl', ['$scope', '$timeout', '$mdSidenav', '$log', 'OctSettings', function($scope, $timeout, $mdSidenav, $log, OctSettings) {
$scope.resolutions = ['Resolution 1', 'Resolution 2', 'Resolution 3'];
$scope.toggleDropdownArray = ['', '', '', ''];
$scope.isThetaView = true;
$scope.isCartView = true;
$scope.isLongView = true;
$scope.brightness = Number(OctSettings.image.brightness);
$scope.contrast = Number(OctSettings.image.contrast);
$scope.$watch('brightness',
function(newVal, oldVal) {
console.log(oldVal);
});
$scope.close = function() {
$mdSidenav('left').close()
.then(function() {
$log.debug('close LEFT is done');
});
};
$scope.toggleDropdown = function(index) {
if($scope.toggleDropdownArray[index] === 'toggle-up') {
$scope.toggleDropdownArray[index] = 'toggle-down';
} else {
$scope.toggleDropdownArray[index] = 'toggle-up';
for(var i=0; i<$scope.toggleDropdownArray.length; i++) {
if(i !== index) {
$scope.toggleDropdownArray[i] = 'toggle-down';
}
}
}
};
}]);
HTML w /滑块的角度材质:
<md-tab label="Image">
<md-content class="md-padding settings-tabs-pg-content">
<div class="brightness-div" layout="">
<div flex="10" layout="" layout-align="center center"><span class="md-body-1 fa fa-sun-o"><md-tooltip>Brightness</md-tooltip></span></div>
<md-slider flex="" min="0" max="100" ng-model="brightness" aria-label="brightness" id="brightness-slider" class="">
</md-slider>
<div flex="20" layout="" layout-align="center center">
<input type="number" ng-model="brightness" aria-label="brightness" aria-controls="brightness-slider">
</div>
</div>
<div layout="">
<div flex="10" layout="" layout-align="center center">
<span class="md-body-1 fa fa-adjust"><md-tooltip>Contrast</md-tooltip></span>
</div>
<md-slider flex="" min="0" max="100" ng-model="contrast" aria-label="contrast" id="contrast-slider" class="">
</md-slider>
<div flex="20" layout="" layout-align="center center">
<input type="number" ng-model="contrast" aria-label="contrast" aria-controls="contrast-slider">
</div>
</div>
<div>
<a class="window-leveling-btn">Window Leveling</a>
</div>
</md-content>
</md-tab>
答案 0 :(得分:3)
我不完全确定为什么你的$ watch不起作用,但我可能会建议一种不同的方法来解决你的问题。
您从服务中初始化$ scope.brightness的值,但只要您从滑块设置它,替换值,服务和范围就不再相互关联。如果您从服务初始化$ scope.image并在其上设置值,则可以通过html中的绑定直接更新服务中的值。
请查看此codepen以获取两种方案的示例:http://codepen.io/troylelandshields/pen/YXeLqG
请注意,第二个示例中的angular.module('app', [])
.factory('fact', function(){
return {
image:{
brightness:5
}
}
})
.controller('ctrl', function($scope, fact){
$scope.num = fact.image.brightness;
$scope.image = fact.image;
$scope.$watch('num', function(newVal, oldVal){
$scope.msg = "Scope value: " + newVal + " , serviceVal: " + fact.image.brightness;
})
$scope.$watch('image.brightness', function(newVal, oldVal){
$scope.msg = "Scope value: " + newVal + " , serviceVal: " + fact.image.brightness;
})
})
仅用于显示消息,完全没有必要更新服务。
{{1}}
答案 1 :(得分:1)
我通过将ng-models更改为image.brightness和image.contrast来解决问题。见$watch not firing on data change。我知道这个问题,但我想,因为我正在看一个数字,而不是一个我不需要这样做的对象。我仍然不太明白,但它现在有效。