0
HTML -Angularjs向鏈路功能
<html ng-app="myApp">
<head>
<title></title>
<link type="text/css" rel="stylesheet" href="style.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="script.js"></script>
</head>
<div ng-controller="mainCtrl">
<div class="login-div">
<div id="div1" class="login toggle">
<input type="text" placeholder="username" />
<input type="password" placeholder="password" />
<button class="btn-login">Login</button>
<div class="link">
<p id="p1" ng-click="toggleClick()">Click here</p>
</div>
</div>
<div id="div2" class="sign-up toggle">
<input type="text" placeholder="username" />
<input type="email" placeholder="email" />
<input type="password" placeholder="password
<button class="btn-login">Sign up</button>" />
<div class="link">
<p id="p2" ng-click="toggleClick()">Click here again</p>
</div>
</div>
<div id="div3" class="sign-up toggle">
<input type="text" placeholder="username" />
<input type="email" placeholder="email" />
<input type="password" placeholder="password
<button class="btn-login">Sign up</button>" />
<div class="link">
<p id="p3" ng-click="toggleClick()">Click here again</p>
</div>
</div>
<div class="btn-close">
<button>X</button>
</div>
</div>
</div>
</html>
js文件 -
var myApp = angular.module("myApp", []);
myApp.controller('mainCtrl', function($scope, $rootScope) {
//$scope.toggleClick = function(){
// $rootScope.$broadcast("toogleDiv","");
//};
});
myApp.directive('toggle', function() {
return {
restrict:'C',
link: function (scope, element, attrs) {
scope.toggleClick = function(){
alert(element.attr('id'));
element.slideToggle();
};
}
}
});
irrespecitve這曾經款項目我點擊時,第三格只能切換。但是,如果您看到toggle指令在所有div上。所以基本上所有div應該滑動,但只有最後一個。
的style.css -
.login-div{
margin: 50px;
width: 200px;
padding:10px;
background-color: black;
box-shadow: 0px 0px 15px 1px rgba(50, 50, 50, 1);
position: relative;
}
.login, .sign-up {
padding:15px;
background-color:#EFF7F7;
border: solid 1px gray;
}
.btn-close {
margin-top: 10px;
text-align: right;
}
.btn-login{
width: 100%;
margin: 10px 0px;
}
input{
border: 1px solid #ccc;
border-radius: 4px;
padding: 5px 0 5px 5px;
color: #555;
width: 162px;
}
a{
display: inline-block;
text-decoration: none;
}
link{
text-align: right;
}
p{
cursor: pointer;
}
我試過與1.4.8版本相同。它不工作。 –
@NagaSandeep - 你可能是正確的作爲不同版本的角度和jQuery的兼容性問題 - https://docs.angularjs.org/misc/faq。上面的問題使用angular v1和jquery 1.9 – Ahmad
你是對的。我沒有注意到OP中的版本。我試圖在1.4.8中實現這一點:) –