如果是子对象，则使用Angular设置ng的父对象高度

Using Angular to set parent height of ng-if children

本文关键字：对象 ng 设置 Angular 高度 如果      更新时间：2023-09-26

我觉得我在这里做错了很多事情。我有一个有3个状态的视图-称它们为介绍、加载和完成。我希望随着用户的进步，每个状态都能从左向右滑动。

以下是基本结构：

var app = angular.module('plunker', ['ngAnimate']);
app.controller('MainCtrl', function($scope) {
  $scope.triggered = '';
  
  $scope.loading = false;
  $scope.completed = false;
  
  $scope.one = function() {
    console.log('one');
    $scope.loading = true;
    $scope.completed = false;   
  };
  
  $scope.two = function() {
    $scope.loading = false;
    $scope.completed = true;   
  };
  
}).directive('inheritHeight', ['$window', '$timeout', function($window, $timeout) {
    return {
      restrict: 'A',
      link: function (scope, elm, attrs) {
        scope.$watch("loading", function(newV, oldV) {
          console.log(newV, elm[0]);
          $timeout(function () {
            scope.triggered = scope.triggered + 'triggered ';
            scope.height = elm[0].querySelector('.child').offsetHeight;
            console.log(elm[0].querySelector('.child'));
            console.log(elm[0].querySelector('.child').offsetHeight);
            elm.css('height', elm[0].querySelector('.child').offsetHeight + 'px');
          });
        });
      }
    };
}]);
.parent {
  border: 1px solid red;
  position: relative;
  overflow: hidden;
}
.child {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0; }
  .child.ng-enter, .child.ng-leave {
    -webkit-transition: 800ms cubic-bezier(0.645, 0.045, 0.355, 1) all;
    -moz-transition: 800ms cubic-bezier(0.645, 0.045, 0.355, 1) all;
    -ms-transition: 800ms cubic-bezier(0.645, 0.045, 0.355, 1) all;
    -o-transition: 800ms cubic-bezier(0.645, 0.045, 0.355, 1) all;
    transition: 800ms cubic-bezier(0.645, 0.045, 0.355, 1) all; }
  .child.ng-enter {
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%); }
  .child.ng-enter.ng-enter-active {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0); }
  .child.ng-leave {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0); }
  .child.ng-leave.ng-leave-active {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%); }
    
.child-a {
  background-color: green;
  height: 100px;
}
.child-b {
  background-color: blue;
  height: 50px;
}
.child-c {
  background-color: yellow;
  height: 30px;
}
<script src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-animate.js"></script>
<div ng-app="plunker" ng-controller="MainCtrl">
  <div class="parent" inherit-height="">
    <div class="child child-a" ng-if="!loading && !completed">
      <button ng-click="one()">Click One</button>
    </div>
    <div class="child child-b" ng-if="loading && !completed">
      <button ng-click="two()">Click Two</button>
    </div>
    <div class="child child-c" ng-if="!loading && completed"></div>
  </div>
  <p>{{ height }}</p>
  <p>{{ triggered }}</p>
</div>

当新状态出现时，带有inherit-height指令的父div似乎无法正确更新其高度，即使它在scope.$watch和$timeout中。。。

有什么建议吗？谢谢

所以我希望querySelector能工作，因为ng-if从DOM中删除元素，但事实并非如此。瞄准要转换的子元素就成功了：

elm.css('height', elm[0].querySelector('.child.ng-enter').offsetHeight + 'px');

在制作任何关于动画和css的东西之前，有两件事你需要提前知道：

1.指令的范围与控制器中的范围不同

在您的示例中，status.loading不指向任何内容。由于您没有为inherit-height指令分配一个独立的作用域，因此它的作用域将与其父级（在您的情况下为MainCtrl）相同。然而，您从来没有注册过类似$scope.status.loading的东西，所以观察者是在免费监视，这就是为什么$timeout服务中的所有逻辑都不起作用的原因。

2.指令的链接函数中的元素参数是元素本身，而不是数组

所以做elm[0]没有任何意义。同样的目标也可以通过elm.eq(0).height()来实现。

3.querySelector将只返回匹配的第一个元素

因此，在您的情况下，它将始终选择child-a，可能不是您想要的。以这种方式获取子元素的高度通常也是一种不好的做法。如果确实需要，创建另一个指令并要求父级提供它会更好。

我建议你在制作其他复杂的css部分之前，先查看angular文档或其他教程中的指令范围和链接函数的想法。

相关文章：