我正在使用角度手风琴指令隐藏/显示内容.

我面临的问题是内容容器的高度没有变化.

这是一个吸烟者：http://plnkr.co/edit/oWXrqoJpaYPDbe4TwT3c?p=preview

如果单击“显示更多”,则可以看到内容是如何隐藏的,而不是显示作业的高度更改.

JS：

app.directive('sliderContentDirective',function () {
    return {
        restrict:'A',compile: function (element,attr) {
            // wrap tag
            var contents = element.html();
            element.html('<div>' + contents + '</div>');

            return function postLink(scope,element,attrs) {
                // default properties
                attrs.duration = (!attrs.duration) ? '0.7s' : attrs.duration;
                attrs.easing = (!attrs.easing) ? 'ease-in-out' : attrs.easing;
                element.css({
                    'overflow': 'hidden','height': '0px','transitionProperty': 'height','transitionDuration': attrs.duration,'transitionTimingFunction': attrs.easing
                });
            };
        }
    };
});

app.directive('sliderToggleDirective',function($document,$timeout) {
    return {
        restrict: 'AE',scope: { 
            target: "@"
        },link: function(scope,attrs) {             

            var timeoutFunc = function () {
                var target = angular.element($document[0].querySelector("#" + scope.target))[0];

                attrs.expanded = false;  
                element.bind('click',function() {

                    var content = target.querySelector('.slideable_content');
                    if(!attrs.expanded) {
                        content.style.border = '1px solid rgba(0,0)';
                        var y = content.clientHeight;
                        content.style.border = 0;
                        target.style.height = y + 'px';
                    }
                    else {
                        target.style.height = '0px';
                    }

                    attrs.expanded = !attrs.expanded;
                });
            }

            $timeout(timeoutFunc,0);
        }
    }
});

如果我检查show-jobs元素,我可以看到它的初始高度为312px.如果我删除它,然后它按预期工作.

正如Giliar已经说过的,问题是你有一个固定的高度,它不允许你的section元素自动获得它的高度以适应它的所有内容(包括新扩展的手风琴).我可以向此提出的解决方案(就我所知,这也是Bootstrap的功能)

>在动画结束时将节的高度设置为自动,这样如果展开嵌套的div,则该节将正确展开.
>在用户尝试将其关闭之前,将高度设置为固定高度,然后将高度设置为0,以便关闭动画正常工作.

要完成第一部分,您可以定义一个函数,将部分的高度调整为auto,并在展开动画完成后调用它.

var adjustHeightFunc = function() {
    var target = angular.element($document[0].querySelector("#" + scope.target))[0];
    if (attrs.expanded) {
        var content = target.querySelector('.slideable_content');
        target.style.height = 'auto';
    }
}

由于展开动画需要0.7秒,你可以调用adjustHeightFunc函数,超时为0.8秒(我觉得这不是最佳选择,因为如果你改变动画的持续时间,你还需要改变这个超时,但它是到目前为止我找到的最佳解决方案,欢迎任何其他建议).因此,在onClick函数的最后,您可以：

$timeout(adjustHeightFunc,800);

要做的第二部分是在折叠部分时不要将部分的高度设置为0,而是始终将其设置为其内容的高度.执行此操作后,如果该部分应该折叠,则使用$timeout调用一个单独的函数,值为0(这样它将在一个单独的摘要周期执行),它将该部分的高度设置为0,从而触发崩溃动画.你的onClick函数因此变成这样：

element.bind('click',function() {
    var content = target.querySelector('.slideable_content');
    var y = content.clientHeight;
    target.style.height = y + 'px';
    if(!attrs.expanded) {
        content.style.border = '1px solid rgba(0,0)';
        content.style.border = 0;
    }
    else {
        $timeout(closeAccordionFunc,0);
    }

    attrs.expanded = !attrs.expanded;
    $timeout(adjustHeightFunc,800);
});

见updated Plunker.

编辑：事实证明,从注释设置中,closeAccordionFunc将以超时0执行,并不适用于所有浏览器.解决方法是声明一个CSS类,它将元素的高度设置为auto(使用！important来直接覆盖元素上的高度集),并使用Angular的$animate服务向元素添加/删除此类并执行删除类后closeAccordionFunc.因此更新的onClick函数是：

element.bind('click',0)';
        content.style.border = 0;
    }
    else {
      $animate.removeClass(angular.element(target),'auto',function(){$timeout(closeAccordionFunc);});
    }

    attrs.expanded = !attrs.expanded;
    if (attrs.expanded) {
      $timeout(adjustHeightFunc,800);
    }
});

另见in Plunker.

我们的应用程序有许多对象,我们可以大致分为3类; ‘核心’,’app’和’对象’.

我在网上跟踪了一个基本的Typescript教程,目前有一个index.d.ts,它有这种布局：

interface AH {

}

declare var ah: AH;

declare module 'ah' {
    export = ah;
}

declare module ah {

    module objects {
        // much objects
    }

    module app {
        //many app
    }

    module core {
        //such core
    }
}

但是由于我们使用了古老的源代码控制,将这个单个文件分解为3个单独的文件,包括应用程序,核心和对象,将“命名空间”作为ah.app.blah,ah.core.blah和ah.objects.blah.

我怎样才能做到这一点？

如果您没有在另一个项目中使用此库,则不需要声明模块.

看起来你有两个选择：

>导出要在单独文件中公开的类型声明,并在需要时导入它们.由于这似乎是最常见的做法,当您处理外部模块时,我认为这有我个人的偏好.

app.d.ts(~core.d.d,objects.d.ts)

export interface theAppInterface {}

src / index.ts(示例用法)

import { theAppInterface } from '../app'
import { theCoreInterface } from '../core'

let appUsage: ah.app.theAppInterface

>在全局声明文件中声明单独的类别,因此它们被放入全局命名空间中,您不必在任何地方单独导入它们.例如.

app.d.ts(~core.d.d,objects.d.ts)

declare namespace ah {
  namespace app {
    interface theAppInterface {}
  }
}

SRC / index.ts

let appUsage: ah.app.theAppInterface
let coreUsage: ah.core.theCoreInterface