Question

我已经开始使用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;
}

Answer 1

我根本没有在你的例子中看到任何实际使用的AngularJS。让我想起AngularJS的唯一一件事就是在你的函数定义中提到了$scope。现在，虽然AngularJS似乎在某些领域神奇地工作，但仍然无法做任何事情。

此外，保留现有代码并添加一些AngularJS部件似乎很诱人。但是看到你的例子，我建议你使用AngularJS的方法重写这个功能。使用ng:hide或ng:show可以轻松完成展示和隐藏内容。您可以使用ng:animate完成动画。如果您需要动态显示数据，请将其放入模型中（在您的范围内），并将其用于ng:repeat等函数。

看起来你在你的例子中所做的事情只能使用AngularJS功能归结为几行，因此结果会更好，更容易阅读和维护。帮自己一个忙，熟悉AngularJS可以为你提供什么，并停止使用直接DOM操作。这是一个糟糕的模式。 DOM操作很麻烦，很复杂，容易破解。它通常也是一个不可避免的混乱。最好的：如果你正在使用AngularJS，它是完全超级的，因为通过在HTML中触发条件逻辑的模型可以更容易地实现一切。

2013年谷歌I / O上AngularJS创作者的一些令人印象深刻的事实：他在开始时使用AngularJS来重写Google的内部项目。结果是14000行代码减少到1500。

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

编辑/附录：我在http://www.youtube.com/watch?v=HCR7i5F5L8c提到的“Google I / O 2013 - AngularJS中的设计决策”我强烈建议您观看此视频与AngularJS。它提供了对AngularJS方式的深入了解，并且当试图说服其他人尝试AngularJS时它的观点很方便：）

编辑/附录2：正如Sprottenwels上面提到的那样，在stackoverflow上还有另一个问题，它对我上面提到的内容进行了更全面的解释，所以请给它一个读：{{ 3}}

编辑/补遗3：正如Sprottenwels再次提到的那样："Thinking in AngularJS" if I have a jQuery background?的视频是一个很好的资源。我个人发现它们有时候有点难以理解（你可能需要停止视频并在AngularJS的文档中阅读，幸好现在它比以前好多了）。

哦，并且在个人注意事项上：自从1997年左右开始进行Web开发以来，我从来都不是在JavaScript中使用类似应用程序的朋友，因为所有这些框架都是如此复杂，有很多样板并且你正在做的事情感觉像浪费时间。 AngularJS确实对我做这些事情的动机产生了奇迹，因为它最终是完全合乎逻辑的，它神奇地像内部工作完全解放了我做的事情，我讨厌像数据和视图的同步。

我非常感谢AngularJS人员，我绝对相信这是进行Web应用程序编程的唯一真正的未来。现在AngularJS在性能方面可能是一个问题，因为做了一些“坏”的东西，比如脏检查，但这会随着Object.observe这样的新浏览器功能而改变。所以我真的认为选择最大限度地使用AngularJS是一个明智且未来安全的举措。

让AngularJS与其他javascript玩得很好

1 个答案: