AngularJS: 使用 $scope.$watch 和控制器作为语法

Question

我有一个 plnkr here，我正在使用 $scope.$watch 测试带有 controller as syntax 的单选按钮。此外，单选按钮嵌入在父视图容器中。

在 'About us' 页面中，我有以下 html 代码用于显示两个单选按钮以及当前选择消息：

<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>

我在 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);
    */

  }
}())

最后，我的 ui.router 配置中有以下与“关于我们”页面相关的代码块：

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

Answer 1

以下作品：

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

Plunkr

Answer 2

你可以试试这个，使用你在 controller 中设置的 'aboutView' 而不是 vm。

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

AngularJS: 使用 $scope.$watch 和控制器作为语法

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

javascript

scope

controller

angularjs

angular-ui-router