改变元素高度

Change element height angularJS

本文关键字：高度 元素 改变      更新时间：2023-09-26

我有下面的代码，我认为会工作。但是它没有

'use strict';
angular.module('remnantApp')
  .directive('bigDiv', function ($timeout) {
    return {
      restrict: 'E',
      scope: {},
      template: '<div style="height: {{height}}, background-color: black;">Hello</div>',
      link: function(scope, element, attrs) {
        scope.height = angular.element(window).height();
      }
    };
  });

请帮

templateUrl应该是template，因为你使用的是内联模板，动态风格也可以使用ng-style渲染，然后模板变成像ng-style="{height: height + ''px'' }"

标记 

<big-div><big-div>


angular.module('remnantApp',[])
  .directive('bigDiv', function ($timeout,$window) {
    return {
      restrict: 'E',
      scope: {},
      template: '<div class="big-div" ng-style="{height: height + ''px'' }" style="background-color: black;">Hello</div>',
      link: function(scope, element, attrs) {
        scope.height = $window.innerHeight; //without jQuery
        //other alternative would be
        //element.find('.big-div').css(height, scope.height);
      }
    };
});
工作Plunkr

在使用动态样式属性时，我会尝试使用ng-style:

'use strict';
angular.module('remnantApp')
  .directive('bigDiv', function ($timeout) {
    return {
      restrict: 'E',
      scope: {},
      template: '<div ng-style="styles">Hello</div>',
      link: function(scope, element, attrs) {
        scope.styles = {
          height: angular.element(window).height(),
          'background-color': 'black'
        };
      }
    };
  });
相关文章：