Javascript 角度表不会在值改变时启动

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

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

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

---

我不完全清楚为什么你的$watch坏了，但是我可以建议一种不同的方法来解决你的问题吗

您可以从服务中初始化$scope.brightness的值，但只要从滑块中设置它，就会替换该值，并且服务和作用域不再相互绑定。如果您从服务中初始化$scope.image并在其上设置值，则可以通过html中的绑定直接更新服务中的值

查看此代码笔，了解两种情况的示例：

请注意，第二个示例中的$scope.$watch仅用于显示消息，完全没有必要更新服务

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

})

---

我通过将ng模型更改为image.brightness和image.contrast解决了这个问题。看见我知道这个问题，但我想，因为我在看一个数字，而不是一个物体，所以我不需要这样做。我仍然不太明白，但它现在起作用了。

我看不到您的代码中有任何地方实际在更新服务中的值。您能在html中显示绑定到该值的位置吗？是的，我正在更新我在其中执行console.logoldVal的服务。我把它取下来做测试，似乎没什么不同。好建议！我不知道你能做到。