Question

我想更改要监视的变量。

JS：

var app = angular.module('myApp', []);

app.controller('MainController', 
  function($scope) {

    $scope.current = null;
    $scope.select = function(item) {
      $scope.current = item;
    };

    var watch = ['current'];
    $scope.$watchGroup(watch, function() {                 // This does not work
      if ($scope.current !== null) {
        watch = ['current'];
        Array.prototype.push.apply(watch, $scope.current.watch);
        $scope.current.callBack();
      }  
    });

    $scope.list = [
        {
          name: 'test-A',
          watch: ['a'],
          callBack: function() {
            $scope.value = 2 * $scope.a;
          }
        },
        {
          name: 'test-B',
          watch: ['b'],
          callBack: function() {
            $scope.value = 3 * $scope.b;
          }
        }
      ];

});

HTML：

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script data-require="jquery" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.slim.min.js"></script>
  <script data-require="bootstrap@3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script data-require="angular.js@1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="MainController">
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
      {{current != null ? current.name : 'DropDown'}}
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
      <li ng-repeat="item in list">
        <a href="javascript:void(0)" ng-click="select(item)">{{item.name}}</a>
      </li>
    </ul>
  </div>
  When "test-A" is selected, result is 2 times of A.
  <br> When "test-B" is selected, result is 3 times of B.

  <br>
  <br>
  <br>

  <form class="form-inline">
    <div class="form-group">
      <label>A</label>
      <input type="text" class="form-control" ng-model="a">
    </div>
    <div class="form-group">
      <label>B</label>
      <input type="text" class="form-control" ng-model="b">
    </div>
  </form>

  <br> result : {{value}}
  <br>
</body>

</html>

This是Plunker的例子。

选择result时A应为test-A的2倍，选择B时应为test-B的3倍。

我想更新要监视的变量。但是行This does not work中显示的方式不起作用。此$watchGroup仅在current更改时触发。如果$watchGroup或current在选中a的情况下更改，test-A或current更改时，我想触发b test-B如果选择$scope.$watchGroup(['a', 'b', 'current'], ...。

我知道$watchGroup有效。但是，当我选择test-A并更改b时，我不想触发此TagForChildDirectedTreatment，反之亦然。

如何更新要监视的变量？

Answer 1

更改行：

$scope.$watchGroup(watch, function() {

如下：

$scope.$watch('current', function() {

这背后的原因是当您单击菜单时current值已更改。 var watch = ['current'];是不同的变量，单击菜单时不会更改此变量。要正常使用watch，您需要指向正确的变量，在您的情况下，$scope.current是正确的变量。

＆＃13;

// Code goes here

var app = angular.module('myApp', []);

app.controller('MainController', 
  function($scope) {
    
    $scope.current = null;
    $scope.select = function(item) {
      $scope.current = item;
    };
    
    var watch = ['current'];
    $scope.$watch('current', function() {
      if ($scope.current !== null) {
        watch = ['current'];
        Array.prototype.push.apply(watch, $scope.current.watch);
        $scope.current.callBack();
      }  
    });
    
    $scope.list = [
        {
          name: 'test-A',
          watch: ['a'],
          callBack: function() {
            $scope.value = 2 * $scope.a;
          }
        },
        {
          name: 'test-B',
          watch: ['b'],
          callBack: function() {
            $scope.value = 3 * $scope.b;
          }
        }
      ];
  
});

＆＃13;

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script data-require="jquery" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.slim.min.js"></script>
  <script data-require="bootstrap@3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script data-require="angular.js@1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="MainController">
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
      {{current != null ? current.name : 'DropDown'}}
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
      <li ng-repeat="item in list">
        <a href="javascript:void(0)" ng-click="select(item)">{{item.name}}</a>
      </li>
    </ul>
  </div>

  <br>

  <form class="form-inline">
    <div class="form-group">
      <label>A</label>
      <input type="text" class="form-control" ng-model="a">
    </div>
    <div class="form-group">
      <label>B</label>
      <input type="text" class="form-control" ng-model="b">
    </div>
  </form>

  <br> result : {{current.watch}}
  <br>
</body>

</html>

＆＃13;

Answer 2

找到以下代码作为答案，看看它是否对您有帮助。

脚本

var app = angular.module('myApp', []);

app.controller('MainController', 
  function($scope) {

    $scope.current = null;
    $scope.select = function(item) {
      $scope.current = item;
    };

    var watch = ['current'];
    $scope.$watchGroup(watch, function() {
      if ($scope.current !== null) {
        watch = ['current'];
        Array.prototype.push.apply(watch, $scope.current.watch);
        $scope.current.callBack();
      }  
    });

    $scope.list = [
        {
          name: 'test-A',
          watch: [' is two times of a'],
          callBack: function() {
            $scope.value = (2 * $scope.a) + ($scope.current.watch);
          }
        },
        {
          name: 'test-B',
          watch: [' is three times of b'],
          callBack: function() {
            $scope.value = (3 * $scope.b) + ($scope.current.watch);
          }
        }
      ];

});

我刚刚将($scope.current.watch)与您的结果联系起来

看看它是否分叉到你的plnkar。

https://plnkr.co/edit/UGPe4lgJPydEeAXOc0xR?p=preview

angularjs：更改要监视的变量

2 个答案: