Question

我已经阅读并尝试了角度$watch() DOM元素高度上的每个线程，但无法解决如何执行此操作。非常感谢任何帮助！

我有一个角度应用程序，可以通过更改模型值来更新简单的类名。例如：

class="theme-{{themeName}}"

当班级更新DIV更改高度时。

我希望收到关于身高变化的回调。

我尝试使用$watch()和$ watch（.. ,, true）并同时使用angular.element()和jquery ( $('foo')... )，但$digest周期甚至没有调用$watch表达式。

更新（代码示例）：

'use strict';

angular.module('k2')
.directive('k2', ['$rootScope', '$templateCache', '$timeout', 'lodash' ,'k2i',
function ($rootScope, $templateCache, $timeout, lodash, k2i) {
  return {
    restrict: 'E',
    template: $templateCache.get('k2/templates/k2.tpl.html'),
    replace: true,
    scope: {
      ngShow: '=',
      ngHide: '=',
      settings: '='
    },
    link: function(scope, elem, attrs) {
      k2i.initK2(scope, scope.settings || {});

      scope.$watch(function() {
        return $('.k2 .k2-template [k2-name]').height();
      }, function(newValue, oldValue, scope) {
        respondToChange(newValue, oldValue, scope);
      }, true);

      scope.$watch(function() {
        var kb = document.querySelectorAll('.k2 .k2-template [k2-name]')[0];
        var ab = document.querySelectorAll('.k2 .k2-template [k2-name] .k2-acc-bar')[0];
        var value = {
          kb: 0,
          ab: 0
        }
        if (kb) {
          value.kb = kb.clientHeight;
        }
        if (ab) {
          value.ab = ab.clientHeight;
        }
        return value;
      }, function(newValue, oldValue, scope) {
        respondToChange(newValue, oldValue, scope);
      }, true);

      function respondToChange(newValue, oldValue, scope) {
        if (newValue === oldValue) return;
        if (!scope.k2Pending) return;

        var kbNode = document.querySelectorAll('.k2 .k2-template [k2-name="' + scope.k2Pending.name + '"]');
        var abNode = document.querySelectorAll('.k2 .k2-template [k2-name="' + scope.k2Pending.name + '"] .k2-acc-bar');

        // Ensure required keyboard elements are in the DOM and have height.
        if ((kbNode.length > 0 && !scope.k2Pending.requiresAccessoryBar ||
           kbNode.length > 0 && abNode.length > 0 && scope.k2Pending.requiresAccessoryBar) &&

          (kbNode[0].clientHeight > 0 && !scope.k2Pending.requiresAccessoryBar ||
           kbNode[0].clientHeight > 0 && abNode[0].clientHeight > 0 && scope.k2Pending.requiresAccessoryBar)) {

          $rootScope.$emit('K2KeyboardInDOM', scope.k2Pending.name, getHeight());
        }
      };

      function getHeight() {
        var height = {};
        var kbElem = angular.element(document.querySelectorAll('.k2')[0]);

        var wasHidden = kbElem.hasClass('ng-hide');
        kbElem.removeClass('ng-hide');
        height[k2i.modes.NONE] = 0;
        height[k2i.modes.ALL] = document.querySelectorAll('.k2 .k2-template [k2-name="' + scope.k2Name + '"]')[0].clientHeight;
        height[k2i.modes.ACCESSORY_BAR_ONLY] = document.querySelectorAll('.k2 .k2-template [k2-name="' + scope.k2Name + '"] .k2-acc-bar')[0].clientHeight;
        height[k2i.modes.KEYBOARD_KEYS_ONLY] = height[k2i.modes.ALL] - height[k2i.modes.ACCESSORY_BAR_ONLY];
        if (wasHidden) {
          kbElem.addClass('ng-hide');
        }
        return height;
       };
     }
   }
 }
]);

Answer 1

您应该只是观看主题名称＆＃39;变量。然后在$ timeout中进行计算。应该需要$ timeout来等待手动DOM更新。例如：

scope.$watch('k2Name', function(newValue, oldValue){
    $timeout(function(){
        //do what you want
    });
});

如何通过模型改变课后角度$ watch元素高度？

1 个答案: