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>

现在在您的控制器中，当您的页面中的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);
       }
  });

继续得到＆＃34; TypeError：无法读取属性＆＃39;值＆＃39; of null＆＃34;在$ scope内部。$ watch function

1 个答案: