让AngularJS与其他javascript配合使用
我已经开始使用AngularJS和一些已经编写好的代码，并且需要让它们一起玩得很好 所以我有让AngularJS与其他javascript配合使用,javascript,jquery,css,angularjs,Javascript,Jquery,Css,Angularjs,我已经开始使用AngularJS和一些已经编写好的代码，并且需要让它们一起玩得很好 所以我有 <html ng-app="MainPage"> <head> ...Some JS includes </head> <body> <div id="divDropDownMenu" class="DropDownMenu"> ....AngularJS stuff in here </div> <
<html ng-app="MainPage">
<head>
...Some JS includes
</head>
<body>
<div id="divDropDownMenu" class="DropDownMenu">
....AngularJS stuff in here
</div>
</body>
在您的示例中，我根本看不到AngularJS的任何实际使用。唯一让我想起AngularJS的是在函数定义中提到的
$scopeng:hideng:showng:animateng:repeat我完全感谢AngularJS的人，我绝对相信这是做web应用程序编程的唯一真正的未来。目前，AngularJS在性能方面可能是一个问题，因为它会做一些“不好”的事情，比如脏检查，但随着新的浏览器功能，如
Object，这一点将会改变。因此，我真的认为选择充分使用AngularJS是明智的，也是未来安全的选择。Angular代码的哪一部分不起作用？它应该做什么？另外，请参阅：Full ACK我发现严格删除项目中的所有jQuery代码很容易，然后使用Angular完成所有操作。一旦你熟悉了这个框架，你仍然可以再次添加jQuery，如果你仍然需要它的话。这个专业地回答了实际问题。谢谢…我没有包括所有的Angular代码，我认为这对这个问题并不重要，因为当我包括jQuery Angular时，它不起作用，当我不包括它时，Angular确实起作用。我开始走上重写的道路，想知道是否有一种简单的方法可以传递$scope。不过我认为你是对的，从长远来看，我最好还是重写一下。谢谢我认为有一些更好的例子说明了如何做这样的事情。@TJunky我极力推荐www.egghead.io/lessons作为学习资源：）嗯，其实没那么难。确定jQuery代码实际上在做什么/打算做什么，然后看看如何在AngularJS中做到这一点。例如，显示/隐藏内容可以归结为将类似于$scope.flag
的内容绑定到ng:view
，然后在您想要显示内容时将$scope.flag设置为true。在jQuery中设置类？将ng:class
与另一个范围变量一起使用。动画？基本上是免费的（即Angular 1.2），您可能只需要设置一些CSS。XHR？使用$http或restanglar。再次：将其绑定到范围变量。在HTML中使用它。
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();
}
/* @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;
}