Watch and this

[zgababa]

Hi,

I think there is a mistake in controllerAs with vm -> [Style Y032] section, I can't reproduce the example.

HTML

<div class="container" ng-controller="TestController as d">
    <input type="text" ng-model="d.title">
</div>

From the styleguide

var vm = this;
this.vm = "Hi";
$scope.$watch('vm.title', function(current, original) {
    $log.info('vm.title was %s', original); 
    $log.info('vm.title is now %s', current); // Nothing happen, when I typing
});

But that works (from the tuto controllerAs http://toddmotto.com/digging-into-angulars-controller-as-syntax/)

 var vm = this;
 vm.title = "";

  $scope.$watch(function () {
      return vm.title;
    }, function (current, original) {
      $log.info('vm.title was %s', original);
      $log.info('vm.title is now %s', current);
  });

Am I wrong or not ?

Thanks !

[BerkeleyTrue]

Yes, the first example won't work as $watch tries to find vm.title on the scope object, $scope['vm.title']. The second version is how I do it when I need a watch.

[johnpapa]

I'm confused ... where does my style guide say to do this.vm = "Hi"; ? Your first sample won;t work ... if I have that, I need to fix it, but that is not what I see in the section you mention. Help me understand?

[zgababa]

Hi,
this.vm = "Hi"; was just an example like my HTML to test the $watch.
The first example come from your style guide : controllerAs with vm [Style Y032]

"Note: When creating watches in a controller using controller as, you can watch the vm.* member using the following syntax. (Create watches with caution as they add more load to the digest cycle.)"

$scope.$watch('vm.title', function(current, original) {
    $log.info('vm.title was %s', original);
    $log.info('vm.title is now %s', current); // Nothing happen
}); 

Thanks !

[johnpapa]

ok, but this.vm won't work as vm is this.

[zgababa]

Yes, you right I typed too fast ;(

[johnpapa]

I just tried this again, just to be sure as I knoww I make mistakes :)

But it worked for me like this:

<input ng-model="vm.title"/>

    function CustomersController($scope, $log) {
        var vm = this;
        vm.title = 'Customers';

        $scope.$watch('vm.title', function(current, original) {
            $log.info('vm.title was %s', original);
            $log.info('vm.title is now %s', current);
        });

Can you confirm this works, or is there still an issue to address?

[zgababa]

Ok, I found my mistake ;)

In my template I put :

<div class="container" ng-controller="DirectiveController as d">
    <input type="text" ng-model="d.title"> // Bind correctly but no watch 
  </div>

And my JavaScript :

var vm = this;
vm.title = 'Customers';

  $scope.$watch('vm.title', function(current, original) { //  I confused the vm with the object vm like when I used a fonction in my first example
      $log.info('vm.title was %s', original);
      $log.info('vm.title is now %s', current); // It works ;)
    });

And my new HTML

<div class="container" ng-controller="DirectiveController as vm">
    <input type="text" ng-model="vm.title">  
  </div>

Sorry for that ! Thank you ;)

[johnpapa]

no worries. i also just updated the code to be more explicit.

[rhullah]

Just a little further clarification...the vm that is being watched in $scope.$watch('vm.title'... is actually the vm variable defined against the $scope from the view, not the vm variable in the controller function, correct?

I've found that confusing too, the first time I created watches with controllerAs syntax. Kinda of puts a dependency on the name chosen for controllerAs. Guess it's just yet another reason to avoid manual watches.

[BerkeleyTrue]

@rhullah Looks like you are right. I am guessing that is why this did not work for me either.