2

我已经开始使用 AngularJS 和一些已经编写好的代码，并且需要让它一起玩得很好。

所以我有 

<html ng-app="MainPage">
<head>
...Some JS includes
</head>
<body>
    <div id="divDropDownMenu" class="DropDownMenu">
      ....AngularJS stuff in here
    </div>
</body>

我正在使用此代码在“divDropDownMenu”末尾附加一个按钮，并在单击该按钮时上下滑动以显示菜单项。

var divPanel = $("<div class='slide-panel'>");
var divContent = $("<div class='content'>");
(function ($, $scope) {

$.fn.slideBox = function(params){

    var content = $(this).html();
    var defaults = {
        width: "100%",
        height: "500px",
        position: "top"         // Possible values : "top",     "bottom"
    }

    // extending the function
    if(params) $.extend(defaults, params);



    $(divContent).html(content);
    $(divPanel).addClass(defaults.position);
    $(divPanel).css("width", defaults.width);

    // centering the slide panel
    $(divPanel).css("left", (100 - parseInt(defaults.width))/2 + "%");

    // if position is top we're adding 
    if(defaults.position == "top")
        $(divPanel).append($(divContent));

    // adding buttons
    $(divPanel).append("<div class='slide-button'>Open Menu</div>");
    $(divPanel).append("<div style='display: none' id='close-button'     class='slide-button'>Close Menu</div>");

    if(defaults.position == "bottom")
        $(divPanel).append($(divContent));

    //$(this).replaceWith($(divPanel));

    // Buttons action
    $(".slide-button").click(function(){
        if($(this).attr("id") == "close-button")
            $(divContent).animate({height: "0px"}, 1000);
        else
            $(divContent).animate({height: defaults.height}, 1000);

        $(".slide-button").toggle();
    });
};

})(jQuery);
function SlidePanelExpandCollapse(ExpandCollapse)
{
if (ExpandCollapse == "Expand") {
    $(divContent).animate({ height: defaults.height }, 1000);
}
else {
    $(divContent).animate({ height: "0px" }, 1000);
}
$(".slide-button").toggle();

}

问题是使用上述代码时，目标 div 内的任何角度都不会触发。

这是上面 JS 菜单滑块的 CSS

/* @override 
http://samuelgarneau.com/slidebox.css
http://samuelgarneau.com/lab/validator/slidebox.css
http://samuelgarneau.com/lab/slidebox.css
http://samuelgarneau.com/lab/slidebox/style/slidebox.css
*/

body {
margin: 0;
padding: 75px 0 0;
}

.slide-panel {
z-index: 9999;
width: 5px;
position:absolute;
}

.bottom {
bottom: 0;
}

.right {
}

.left {
position: absolute;
left: 0;
}

.top {
top: 0;
}

.content {
margin-left: auto;
margin-right: auto;
z-index: 10;
overflow: hidden;
text-align: left;
background-color: #343434;
height: 0;
width: 100%;
color: #fff;
}

.slide-button {
background: none repeat scroll 0 0 gray;
margin-left: auto;
margin-right: auto;
position:relative;
width: 150px;
z-index: 20;
cursor: pointer;
height: 30px;
padding-top: 10px;
text-align: center;
}

.slide-button:hover {
color: #ffffff;
}
4

1 回答 1

3

在您的示例中，我根本没有看到 AngularJS 的任何实际使用。唯一让我想起 AngularJS 的是$scope在你的函数定义中提到的。现在虽然 AngularJS 在某些领域看起来很神奇，但这仍然无济于事。

此外，保留现有代码并仅添加一些 AngularJS 部分似乎很诱人。但是，看到您的示例，我建议您使用 AngularJS 的方式重写此功能。ng:hide使用或可以轻松地显示和隐藏内容ng:show。你做的动画东西可以用ng:animate. 如果您需要动态显示数据，请将其放入模型（在您的范围内）并将其与ng:repeat.

看来，您在示例中所做的事情将归结为使用 AngularJS 功能的几行代码，因此结果会更好，更易于阅读和维护。帮自己一个忙，熟悉 AngularJS 可以为您提供什么，并停止为直接 DOM 操作而烦恼。这是一个糟糕的模式。DOM 操作令人讨厌、复杂且容易崩溃。它通常也是一个无法维护的混乱。最好的：如果你仍然在使用 AngularJS，那么它完全是多余的，因为通过在 HTML 中使用触发条件逻辑的模型可以更容易地实现一切。

AngularJS 创建者在 2013 年 Google I/O 上的谈话中有一个令人印象深刻的事实：他在一开始就使用 AngularJS 重写了 Google 的一个内部项目。结果是 14000 行代码减少到 1500 行。

我认识到这并不能真正算作您问题的答案，但我真的相信您最好立即停止这种方法，而不是浪费时间在 AngularJS 中重写它。即使您仍然必须阅读所有细节，这严重不应该超过半小时。

编辑/附录：我提到的演讲是“Google I/O 2013 - AngularJS 中的设计决策”，网址为http://www.youtube.com/watch?v=HCR7i5F5L8c我强烈建议即使已经体验过的人也可以观看此视频使用 AngularJS。它对 AngularJS 的方式提供了很好的洞察力，并且在试图说服其他人尝试 AngularJS 时，它的观点很方便:)

编辑/附录2：正如上面提到的 Sprottenwels 一样，stackoverflow 上还有另一个问题，它对我上面的内容进行了更彻底的解释，所以请阅读：“在 AngularJS 中思考”如果我有 jQuery 背景？

编辑/附录 3： Sprottenwels 再次很有帮助地提到： http ://www.egghead.io/lessons 上的视频是一个很好的资源。我个人发现它们有时有点难以理解（你可能需要停止视频并阅读 AngularJS 的文档，幸好现在比以前好多了）。

哦，就个人而言：虽然我从 1997 年左右开始进行 Web 开发，但我从来都不是在 JavaScript 中做应用程序之类的东西的朋友，因为所有这些框架都非常复杂，有很多样板文件，而且你做的东西感觉像是在浪费时间。AngularJS 确实对我做这些事情的动机产生了奇迹，因为它最终是完全合乎逻辑的，而且它神奇的内部工作方式完全让我摆脱了我讨厌的事情，比如数据和视图的同步。

我非常感谢 AngularJS 的人们，我绝对相信这是做 Web 应用程序编程的唯一真正的未来。现在 AngularJS 在性能方面可能会出现问题，因为它会做诸如脏检查之类的“坏”事情，但是随着新的浏览器功能（例如Object.observe. 所以我真的认为选择充分使用 AngularJS 是一个明智且未来安全的举措。

于 2013-10-15T13:51:08.090 回答