時計がControllerAsでthis.valueをキャッチしていません構文

Question

時計がng-model="billing.inputBoxFilter"への変更をキャッチしていません。何か案は？エラーはありません。 console.log

  <ng-include 
      src="'billing/billing.html'" 
      ng-controller="BillingCtrl as billing"></ng-include> 

---

angular.module('patientBilling') 
    .controller('BillingCtrl', [ 

     this.inputBoxFilter; 
     $scope.$watch(angular.bind(this, function() { 
     return this.inputBoxFilter; 
     }, function(newValue, oldValue) { 
      console.log(newValue); 
     })); 

Answer 1

---

 <md-input-container flex="50"> 
     <label>Name</label> 
     <input ng-model="billing.inputBoxFilter" type="text" 
      ng-disabled="selectedItem"> 
     <md-icon md-svg-icon="magnify"></md-icon></md-icon> 
     </md-input-container> 

からわずか何も出力はちょうど thisの参照を使用していません。

var vm = this; 

    $scope.$watch(function() { 
    return vm.inputBoxFilter 
    }, function(newValue, oldValue) { 
    console.log(newValue); 
    }); 

DEMO

Answer 2

問題は、コールバックの引数が正しくありませんでしたシンタックスの問題（でないエラー）でした。 ControllerAsの構文がどのように読みやすさを破り、余分なコードを生成するかについての良い例です。

$scope.$watch(angular.bind(this, function() { 
    return vm.inputBoxFilter; 
    }), function(newValue, oldValue) { 
     console.log(newValue); 
    }); 

Answer 3

コントローラインスタンスは、controllerAs識別子が定義されている場合はスコープ上のプロパティとして使用できますが、これがcontrollerAs構文が使用される理由です。

それは

$scope.$watch('billing.inputBoxFilter', function(newValue, oldValue) { ... });