代码之家 › 专栏 › 技术社区 › Nishant Florentin

在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

angularjs-directive angularjs

Nishant Florentin · 技术社区 · 6 年前

我正在做一件事 workaround 使用 position: absolute 这需要一个 div 有待计算。

<html>
  <!-- this iframe will positioned by an angular partial through a directive -->
  <iframe style="position: absolute; width: 400px; height: 400px";></iframe>
  <div id="angular"></div>
<html>

它适用于以下静态部分:

<div id="dummy" style="width: 400px; height: 400px;"></div>
<reposition></reposition>

但对于具有 ng-if 或 ng-show 这将不起作用,因为渲染后计算的位置将发生变化。

<div ng-if="variable" style="width: 200px; height: 200px"></div>
<div id="dummy" style="width: 400px; height: 400px;"></div>
<reposition></reposition>

如果我能拦截 如果 和 ng秀 要执行以下操作: 如果 , code to reposition 然后我就能让它工作了。我在考虑写一份新的指令 ng-hack-if 那也一样。

这是答案 codepen .只需切换指令的 ng秀 从…起 true 到 false .什么时候 符合事实的 一切正常, reposition 很好。但当它是 错误的 , 重新定位 认为有一个 div 但Angular在其评估周期中将其删除。我只需要打电话给 moveContainerAccordingToHolder AngularJS进行DOM修改时,即调用 ng秀 在这种情况下。

5 回复 | 直到 6 年前

Dilushika Weerawardhana 6 年前

通过使用 设置超时 作用

module1.directive('reposition', [function() {
    return {
        restrict: 'E',
        replace: true,
        link: function(scope, element, attrs) {
            var holder = angular.element(
                document.getElementById("holder")
            )[0];
            setTimeout(function() {
              window.moveContainerAccordingToHolder(holder);
            },0);
        },
        template: directiveTemplate
    };
}]);

这也适用于ng show=“false”。

Nishant Florentin 6 年前

你可以试试这个 ngStyle 指示 AngularJS 。它可以帮助您动态更改任何元素的CSS。看看这个 link .

Sravan 6 年前

请检查这个答案,

我做了一个切换函数,做了一个 variable show 显示和隐藏 div 我打了电话 moveContainerAccordingToHolder 在这个功能里面。

我加了一个 click to toggle 按钮,请点击那个 button

这是你的指示:

    directiveTemplate = `
    <div id="directive">
        <span ng-click="toggleShow()"> Click to Toggle </span>
        <div id="pre" style="width: 102.4px; height: 35.9px" ng-show="show">
            Pre
        </div>
        <div id="holder" style="width: 102.4px; height: 76.8px; border:1pt dashed gray;">
        </div>
        <div id="post" width="102.4">
            Post
        </div>
    </div>`;

    // Integration Begins

    function moveContainerAccordingToHolder(holder) {
        var reposition = document.getElementById('reposition');
        reposition.style.border = "1pt solid green";
        reposition.style.position = "absolute";
        var holderTop = holder.getBoundingClientRect().top;
        var holderLeft = holder.getBoundingClientRect().left;
        var scrollTop = document.documentElement.scrollTop;
        var scrollLeft = document.documentElement.scrollLeft;
        holderTop = holderTop + scrollTop + 1;
        holderLeft = holderLeft + scrollLeft + 1;
        holderTop = String(holderTop) + "px";
        holderLeft = String(holderLeft) + "px";
        reposition.style.top = holderTop;
        reposition.style.left = holderLeft;
        reposition.style.display = "block";
    }

    // Integration Ends

    // Angular Begins

    (function(angular) {
        'use strict';
        var module1 = angular.module('module', []);
        module1.controller('Controller', ['$scope', function($scope) {

        }]);
        module1.directive('reposition', [function() {
            return {
                restrict: 'E',
                replace: true,
                link: function(scope, element, attrs) {
                    scope.show = true;
                    var holder = angular.element(
                        document.getElementById("holder")
                    )[0];
                    window.moveContainerAccordingToHolder(holder);
                    scope.toggleShow = function(){
                      scope.show = !scope.show
                      window.moveContainerAccordingToHolder(holder);

                    }
                },
                template: directiveTemplate
            };
        }]);
    })(window.angular);

// Angular Ends

Here is a DEMO for the same

Nishant Florentin 6 年前

以指导性的方式进行。根据你将要创建的指令,把逻辑放在那里。

Nishant Florentin 6 年前

选择 over-riding 该指令的父指令 $scope.$apply 和 $scope.$digest 从指令的 link 功能也不错。这样的话,对部分的任何更改都会触发重新定位,这正是我想要的。

var parentApply = scope.$parent.$apply;
var parentDigest = scope.$parent.$digest;
scope.$parent.$apply = function() {
    console.log("Apply was called");
    var r = parentApply.call(scope.$parent);
    moveContainerAccordingToHolder(holder);
    return r;
};
scope.$parent.$digest = function() {
    console.log("Digest was called");
    var r = parentDigest.call(scope.$parent);
    moveContainerAccordingToHolder(holder);
    return r;
};