javascript - 继续在 $scope.$watch 函数内获取 "TypeError: Cannot read property ' value' of null"

Question

我试图从容器中获取一个值，当其值发生变化时，会触发 $scope.$watch 来启动另一个函数。尽管我可以确认它正在检索正确的值，但我只能得到上面的错误。 我怀疑 $watch 在颜色变量有机会初始化之前加载。

我的 AngularJS 脚本:

'use strict';

angular.module('careApp.tMain', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/tMain', {
    templateUrl: './templates/tMain.html',
    controller: 'tMainCtrl'
  });
}])

.controller('tMainCtrl', function($scope, $http) {
  $scope.dimmer = 100;
  $scope.color = '#c24747';

  $scope.$watch('color', function(){
    console.log('Color has changed to ' + $scope.color);
    hexToRGB($scope.color);
  })
});

$watch 函数监视以下 HTML 代码块:

        <div>
           <!-- $watch looks for changes here-->
           <ng-farbtastic ng-model="color"></ng-farbtastic>

            <md-input-container class="hide">
                <label>Color</label>
                <!-- Curly brace 'color' variable from farbtastic.js code -->
                <input type="text" value="{{color}}">
            </md-input-container>
        </div>

我需要做什么来纠正此错误？

Answer 1

首先从 html 中删除 readonly 和 value 属性。

<md-input-container class="hide">
   <label>Color</label>
   <input type="text" ng-model='color'>
</md-input-container>

现在，在您的 Controller 中，当页面中的 ng-model 发生更改时，$scope.color 的值应该会自动更新。

如果您想使用 $watch 功能，就在这里。

$scope.$watch(function()
    {
       return $scope.color
    },
    function(newVal,oldVal){
       if (oldVal!==newVal){
          console.log('Color has changed to ' + newVal);
          hexToRGB(newVal);
       }
  });