Question

我正在创建一个应用程序，用户可以选择一个项目或使用他们的相机获取转换为项目ID的qr代码。

问题在于我认为一些JQuery正在弄乱我的范围正常工作。

我必须通过收听内部HTML更改来获取QR代码，一旦更改（DOMSubtreeModified），就会发生以下情况。

  var index = 0;
  $('#result').one('DOMSubtreeModified', function(e) {
    var code = "";
    if (e.target.innerHTML.length > 0) {
      code = e.target.innerHTML;
      $scope.ToRun(code);
    }
  });

  $scope.ToRun = function(code) {
    for (i = 0; i < $scope.plantList.length; i++) {
      if ($scope.plantList[i].plantcode == code) {
        index = i;
        break;
      }
    }
    $scope.currentPlant = $scope.plantList[index];
    $scope.plantDetails = false;
    $scope.searchDetails = true;
  }

由于某种原因，以下内容对我的ng-class没有任何影响。当选择一个项目时，我隐藏输入对话框，并显示结果。

$scope.plantDetails = false;
$scope.searchDetails = true;

但是当用户手动选择项目时，它的效果非常好。（这些项目有一个点击它）

  $scope.viewPlant = function(plant) {
    $scope.currentPlant = plant
    $scope.plantDetails = false;
    $scope.searchDetails = true;
  };

以上工作正常，只需点击即可。那么为什么我的新函数会听取内部HTML更改工作呢？

HTML片段

<div ng-class="{ 'hidden': searchDetails }">

   <!-- CHOOSE INPUT TYPE -->

   <div class="form-group" style="margin-bottom:0px">
      <div class="btn-group btn-group-justified">
         <div class="btn-group">
            <button type="button" class="btn btn-default" ng-click="digits = false; qr = true">Plant Code</button>
         </div>
         <div class="btn-group">
            <button type="button" class="btn btn-default" ng-click="digits = true; qr = false">QR Code</button>
         </div>
      </div>
   </div>
   <br />

   <!-- QR CODE INPUT -->

   <div ng-class="{ 'hidden': qr }">
      <img id="blah" src="./images/placeholder.png" />
      <span class="btn btn-default btn-file">
      <i class="glyphicon glyphicon-camera"></i>&nbsp;
      <input type="file" onchange="readURL(this);handleFiles(this.files)">
      </span>
      <div id="result">xxxxxx</div>
      <canvas id="qr-canvas" width="800" height="600"></canvas>
   </div>

   <!-- MANUAL SELECTION INPUT -->

   <div ng-class="{ 'hidden': digits }">
      <input ng-model="search.$" style="width:100%; font-size:30px; text-align:center" placeholder="Plant Code" />
      <div style="overflow: auto; max-height:250px">
         <table class="table table-striped" style="background-color:lightblue">
            <tr ng-repeat="plant in plantList | filter:search" ng-click="viewPlant(plant)" style="cursor:pointer">
               <th>{{plant.name}}</th>
               <th>{{plant.plantcode}}</th>
            </tr>
         </table>
      </div>
   </div>
   <div>
   </div>
</div>
<div ng-class="{ 'hidden': plantDetails }">
   // results - this should appear when one of the above is entered.
   //           works for manual selection, but not qr code
</div>

为什么我的QR输入不会触发更改类选项来隐藏searchDetails div并显示plantDetails div

编辑：做一个小测试，似乎我的类变量确实根本没有更新。我只是将值放在页面底部，并且在按下以下块时不会更新：

$scope.plantDetails = false;
$scope.searchDetails = true;

Answer 1

你需要让Angular了解这一变化。在方法的最后添加它，让我知道它是否有效。

$scope.$apply();

JQuery是否破坏了我的功能？

1 个答案: