如何在angular js中添加观察者

Question

我正在尝试在演示中添加观察程序。我可以在类似的对象中添加手表

$scope.$watch('username',function(newvalue,oldvalue){
        console.log(newvalue +":"+oldvalue);
        $scope.newmessage=newvalue.toUpperCase();
    })

它工作得很好。但当我尝试测试时，它给了我错误。这是我的代码

describe('value check', function() {
  var $scope,
    ctrl,
    fac,
    $httpBackend;
  beforeEach(function() {
    module('app');
  });
  afterEach(function() {
    $httpBackend.verifyNoOutstandingExpectation();
    $httpBackend.verifyNoOutstandingRequest();
  });
  beforeEach(inject(function($rootScope, $controller, _$httpBackend_) {
    $scope = $rootScope.$new();
    $httpBackend = _$httpBackend_;
    createController = function() {
      return $controller('cntrl', {
        '$scope': $scope
      });
    };
  }));
  describe('watch check', function() {
    beforeEach(function() {
      $scope.$digest();
    });
    it('should init', function(){
      expect($scope.newmessage).toBeUndefined();
    });
    it('should upper case',function() {
      var controller = createController();
      $scope.message='naveen';
      $scope.$digest();
      expect($scope.newmessage).toEqual('NAVEEN');
    });
  });

  it("tracks that the spy was called", function() {
    var response = [{
      "name": "naveen"
    }, {
      "name": "parveen"
    }]
    $httpBackend.whenGET('data.json').respond(response);
    var controller = createController();
    $httpBackend.expectGET('data.json').respond(response);
    $scope.getData();
    $httpBackend.flush();
    expect($scope.data[0].name).toEqual('naveen')
  });
});

Plunker

http://plnkr.co/edit/NhazRDVM01DCDQWw8yzV?p=preview

Answer 1

第一个错误是意外请求，可以通过在should uppercase测试用例中模拟data.json请求来解决。

第二个错误可以通过执行$scope.username = 'naveen'而不是$scope.message = 'naveen'来修复，因为您实际上是在关注用户名的更改，而不是消息的更改。

第三个错误是，当您初始化手表时，它被未定义的新值触发。要解决此问题，请检查控制器中是否未定义：

if (newvalue) {
       $scope.newmessage = newvalue.toUpperCase();
}

参见plunker：http://plnkr.co/edit/OBUcoNGPdfRwy3hwR4KZ?p=preview