Question

我有两个滑块，一个用于亮度，另一个用于对比度。随后，它们附加到“亮度”模型和“对比度”模型。这些滑块位于选项卡界面中，只要选项卡更改，值就会重置。我决定创建一个工厂服务来存储值，并希望在滑块更改时随时使用新值更新工厂。我知道滑块模型正在更新，因为每个滑块旁边都有一个框显示模型的当前值。在服务设置值之后似乎控制台日志一次，但之后从不记录。 enter image description here
控制器代码：

'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>

Answer 1

我不完全确定为什么你的$ 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}}

Answer 2

我通过将ng-models更改为image.brightness和image.contrast来解决问题。见$watch not firing on data change。我知道这个问题，但我想，因为我正在看一个数字，而不是一个我不需要这样做的对象。我仍然不太明白，但它现在有效。

Angular手表不会触发价值变化

2 个答案: