Question

我有两个控件，一个无线电控件和一个清单控件，其中只有一个在任何给定时间显示（基于布尔值multiline）。

我也有一些观察$scope的逻辑。这两个控件都在同一个控制器中，因此它们共享相同的范围。问题是，只有radio元素才会触发watch语句！我不能为我的生活获得愚蠢的checklist元素来处理它...它应该，因为campaignValues肯定会用新值更新！

我做错了什么？我在$parent类上尝试了多个.checkbox修饰符，但它们似乎没有做任何事情。 如何将campaignValues参数连接到watchCollection声明？

标记

<div class="radio" ng-repeat="campaign in campaigns" ng-if="!multiline">
  <input type="radio" name="name" 
         ng-model="$parent.$parent.campaignValue" 
         id="name_{{campaign}}" value="{{campaign}}"/>
  <label for="name_{{campaign}}">
    {{campaign}}
  </label>
</div>
<div class="checkbox" ng-repeat="campaign in campaigns" ng-if="multiline">
  <input type="checkbox" name="name" 
         ng-checked="campaignValues.indexOf(campaign) != -1" 
         ng-click="toggleCheck(campaign)" id="name_{{campaign}}" 
         value="{{campaign}}"/>
  <label for="name_{{campaign}}">
    {{campaign}}
  </label>
</div>

控制器

  // Initiate other module radio control
  // Hard-coded in - remember to change
  $scope.campaigns = ['A', 'B', 'C', 'D'];
  $scope.campaignValue = $scope.campaigns[0];

  // Initiate module checkbox control
  $scope.campaignValues = [];

  // Logic for handling when a checkbox is toggled
  $scope.toggleCheck = function(campaign) {
    if ($scope.campaignValues.indexOf(campaign) === -1) {
      $scope.campaignValues.push(campaign);
    } else {
      $scope.campaignValues.splice($scope.campaignValues.indexOf(campaign), 1)
    }
  };

$scope.$watchCollection(
  '[optionValue, campaignValue, campaignValues, multiline]', 
  function() {
    updateDashboard();
  });

Answer 1

如果您的模型是对象而不是基元，那么您不需要$watchCollection。很多angulars默认指令，比如ng-bind或{{}}，已经内置了$watch语句。如果你只使用默认指令，那么你就是＆＃39; dot＆＃39;模型，它可以构建一个应用程序而不写一个$watch语句。

我假设您的来电updateDashboard()，您的信息中心已标记为{{}}。

工作演示：http://plnkr.co/edit/AzhmeA?p=preview

注意：我放弃了ng-if，＆amp; amp;添加了双重绑定以显示广告系列模型中的更改。

<强> app.js

JS中的两个更改，数组到对象，＆amp;切片对象的路径。

// Changed array to object
$scope.campaigns = {obj: {data:['A', 'B', 'C', 'D']} };
// changed to object path
$scope.campaignValue = $scope.campaigns.obj.data[0];

// Initiate module checkbox control
$scope.campaignValues = [];

// Logic for handling when a checkbox is toggled
$scope.toggleCheck = function(campaign) {
    if ($scope.campaignValues.indexOf(campaign) === -1) {
        $scope.campaignValues.push(campaign);
    } else {
        $scope.campaignValues.splice($scope.campaignValues.indexOf(campaign), 1)
    }
};

<强> HTML

HTML中的三个更改，两个ng-repeat模型都更改为对象路径，第二个$ parent删除以更新campaignValue模型。

// changed campaigns model to object path
<div class="radio" ng-repeat="campaign in campaigns.obj.data">

// dropped 2nd $parent to get double bindings working
<input type="radio" name="name" 
         ng-model="$parent.campaignValue"
         id="name_{{campaign}}" 
         value="{{campaign}}"/>

  <label for="name_{{campaign}}">
    {{campaign}}
  </label>

</div>

<br>
campaignValue:{{campaignValue}}
<br>
campaignValues:{{campaignValues}}
<br><br>

// changed campains model to object path
<div class="checkbox" ng-repeat="campaign in campaigns.obj.data">

  <input type="checkbox" name="name" 
         ng-checked="campaignValues.indexOf(campaigns) != -1" 
         ng-click="toggleCheck(campaign)" id="name_{{campaign}}" 
         value="{{campaign}}"/>

  <label for="name_{{campaign}}">
    {{campaign}}
  </label>

</div>

Angular与嵌套作用域，尝试使用$ parent但仍然没有更新

标记

控制器

1 个答案: