AngularJS: use $scope.$watch with controller as syntax

Question

I have a plnkr here that I am testing $scope.$watch on radio buttons with the controller as syntax. In addition, the radio buttons are embedded inside a parent view container.

In the 'About us' page, I have the following html code for showing two radio buttons along with the current selection message:

<div class="row-fluid">
  <div class="well">
    <p><strong>Make a selection:</strong></p>
    <label>Yes</label>
    <input type="radio" name="selection" ng-model="aboutView.radioSelection" value="Yes">

    <label>No</label>
    <input type="radio" name="selection" ng-model="aboutView.radioSelection" value="No">

  <p>{{aboutView.message}}</p>
  </div>

I have the following code in the aboutController.js:

(function() {
  'use strict';

  angular.module('layoutApp')
  .controller('aboutController', aboutController);

  aboutController.$inject = ['$scope'];

  function aboutController($scope) {

    var vm = this;
    vm.radioSelection = "No";  //default selection
    vm.message = "Your selection is " + vm.radioSelection;

    /**
    * **This does not have any response, not working**
    $scope.$watch(vm.radioSelection, function(newVal, oldVal) {
      vm.message = newVal;
    }, true);
    */

  }
}())

Lastly, I have the following block of code in my ui.router config that is relevant to the about us page:

.state('home.about', {
      url: '/about',
      templateUrl: 'about.html',
      controller: 'aboutController as aboutView'
    })

Rmuller's answer is good. Have a look at github.com/christopherthielen/angular-360-no-scope for another approach without injecting $scope. — Chris T
– Chris T, Commented Mar 23, 2015 at 0:42
possible duplicate of Angularjs: 'controller as syntax' and $watch — Damjan Pavlica
– Damjan Pavlica, Commented Aug 18, 2015 at 9:09

Theraot · Accepted Answer · 2019-11-22 03:40:46Z

14

The following works:

$scope.$watch(
  function() { return vm.radioSelection}, 
  function(newVal, oldVal) {
    vm.message = "Your selection is " + newVal;
  }, 
  true
);

Plunkr

edited Nov 22, 2019 at 3:40

Theraot

41.2k7 gold badges70 silver badges107 bronze badges

answered Mar 22, 2015 at 22:46

rmuller

1,83712 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Raja Jaganathan · Accepted Answer · 2016-01-19 12:19:59Z

0

You can try this one, use 'aboutView' as you set in controller As instead of vm.

$scope.$watch('aboutView.radioSelection', function(newVal,     oldVal) {
    vm.message = "Your selection is " + newVal;
});

answered Jan 19, 2016 at 12:19

Raja Jaganathan

36.7k4 gold badges34 silver badges37 bronze badges

1 Comment

AFP_555 Over a year ago

Woudln't this couple the controller with the view? I mean, it compromises the way "MyController as name" has to be called, based on the controller's $watch function.

Collectives™ on Stack Overflow

AngularJS: use $scope.$watch with controller as syntax

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related