javascript - 使用 jquery 单击函数完成执行后， Angular 模型更新和值丢失了吗？

Question

在这个例子中，当我们点击点击链接时:-

      $scope.div_1 = true;
      $scope.div_2 = true;
      $scope.div_3 = true;

正在动态更新此值，如下所示:-

for (var i = 1; i <= 3; i++) {
      if(i == parseInt(divNumber) && $scope['div_'+i] != true){
        $scope['div_'+i.toString()] = true;
      }
      else{
        $scope['div_'+i.toString()] = false;
      }
  }

虽然我调试时间模型值在范围内正确变化(如果扩展第二个 $scope.div_1 和 $scope.div_3 变为假并且 $scope.div_2 变为真)但它不更新 UI 并且模型丢失并且也值更改以前的值任何人都可以帮助...

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

app.controller('MainCtrl', function($scope) {
 
  $scope.div_1 = true;
  $scope.div_2 = true;
  $scope.div_3 = true;
 
  $("a.expansion-btn").click(function (){
  classes = this.className;
  var divNumber = classes.slice(-1);
  var toGetId = "#div-"+divNumber;
  
  for (var i = 1; i <= 3; i++) {
      if(i == parseInt(divNumber) && $scope['div_'+i] != true){
        $scope['div_'+i.toString()] = true;
      }
      else{
        $scope['div_'+i.toString()] = false;
      }
  }
  if ($(toGetId).hasClass("expanded-div")){
   $(".normal-div").removeClass("compressed-div");
   $(".normal-div").removeClass("expanded-div");
  }
  else{
   $(".normal-div").removeClass("compressed-div");
   $(".normal-div").removeClass("expanded-div");
   $(".normal-div").addClass("compressed-div");
   $(toGetId).removeClass("compressed-div");
   $(toGetId).addClass("expanded-div");    
  }  
});
 
 
  
  
});

*{
  box-sizing:border-box;
}
.contenth1{
  height:10%;
}
.contenth2{
  height:80%;
}
.container{
  margin:0;
  padding:0;
  width:100%;
  height:400px;
}
.normal-div{
  width:33.33%;
  height:100%;
  position:relative;
  border:2px solid black;
  float:left;
}
.expanded-div{
    width:80%;
}
.compressed-div{
  width:10%;
}
#div-1{
   
}
#div-2{
   
}
#div-3{
   
}
a.expansion-btn{
  position:absolute;
  top:10px;
  right:10px;
  font-weight:bold;
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="editor" ng-controller="MainCtrl">
            <div class="normal-div" id="div-1">
              <div class="contenth1">
                 <a class="expansion-btn exp-1">click</a>
              </div>
              <a id="glyp" class="file" ng-show="div_1"> {{div_1}}</a>
              <div class="contenth2">one</div>
            </div>
            <div class="normal-div" id="div-2">
             <div class="contenth1">
                 <a class="expansion-btn exp-2">click</a>
              </div>
              <a  id="glyp" class="duplicate" ng-show="div_2"> {{div_2}}</a>
              <div class="contenth2">two</div>
            </div>
            <div class="normal-div" id="div-3">
              <div class="contenth1">
                <a class="expansion-btn exp-3">click</a>
              </div>
              <a id="glyp" class="eye" ng-show="div_3">{{div_3}} </a>
              <div class="contenth2">three</div>
            </div>
          </div>

Answer 1

在使用 angular 时，请尽可能尝试使用 angular 方法。

您可以使用 ng-click 实现所需的功能。使用 ng-click 您可以传递通风信息，使用它您可以获取元素并执行其余操作。

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

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

  $scope.div_1 = false;
  $scope.div_2 = false;
  $scope.div_3 = false;

  $scope.update = function(event) {
   
    var elem = event.target;

    classes = elem.className;
    var divNumber = classes.slice(-1);
    var toGetId = "#div-" + divNumber;
    
    for (var i = 1; i <= 3; i++) {
      if (i == parseInt(divNumber) && $scope['div_' + i] != true) {
        $scope['div_' + i.toString()] = true;
      } else {
        $scope['div_' + i.toString()] = false;
      }
    }
    if ($(toGetId).hasClass("expanded-div")) {
      $(".normal-div").removeClass("compressed-div");
      $(".normal-div").removeClass("expanded-div");
    } else {
      $(".normal-div").removeClass("compressed-div");
      $(".normal-div").removeClass("expanded-div");
      $(".normal-div").addClass("compressed-div");
      $(toGetId).removeClass("compressed-div");
      $(toGetId).addClass("expanded-div");
    }

  };

});

* {
  box-sizing: border-box;
}
.contenth1 {
  height: 10%;
}
.contenth2 {
  height: 80%;
}
.container {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 400px;
}
.normal-div {
  width: 33.33%;
  height: 100%;
  position: relative;
  border: 2px solid black;
  float: left;
}
.expanded-div {
  width: 80%;
}
.compressed-div {
  width: 10%;
}
#div-1 {} #div-2 {} #div-3 {} a.expansion-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-weight: bold;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="editor" ng-controller="MainCtrl">
  <div class="normal-div" id="div-1">
    <div class="contenth1">
      <a class="expansion-btn exp-1" ng-click="update($event)">click</a>
    </div>
    <a id="glyp" class="file" ng-show="div_1"> {{div_1}}</a>
    <div class="contenth2">one</div>
  </div>
  <div class="normal-div" id="div-2">
    <div class="contenth1">
      <a class="expansion-btn exp-2" ng-click="update($event)">click</a>
    </div>
    <a id="glyp" class="duplicate" ng-show="div_2"> {{div_2}}</a>
    <div class="contenth2">two</div>
  </div>
  <div class="normal-div" id="div-3">
    <div class="contenth1">
      <a class="expansion-btn exp-3" ng-click="update($event)">click</a>
    </div>
    <a id="glyp" class="eye" ng-show="div_3">{{div_3}} </a>
    <div class="contenth2">three</div>
  </div>
</div>

您也可以在 JQuery 函数的末尾调用 $scope.$apply() 以获得类似的结果，但 Angular 方式更可取。