Angularjs向链路功能

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; 
 
}

来源

2016-02-23 Raja Chowdhury

添加scope:{},到指令定义应该解决您的问题。您的指令需要使用隔离的作用域才能重用它。

的问题是，toggleClick定义被分配给基于您的HTML表示该指令的div3的执行力和覆盖定义是最后一个函数父范围。出于兴趣，如果你换了你的div，你可能会注意到最后定义的div始终是被点击的div。

调整器：https://plnkr.co/edit/y5bD8yDZ0dLZZW6FlnFE

来源

2016-02-23 06:07:08 Ahmad

我试过与1.4.8版本相同。它不工作。 –

@NagaSandeep - 你可能是正确的作为不同版本的角度和jQuery的兼容性问题 - https://docs.angularjs.org/misc/faq。上面的问题使用angular v1和jquery 1.9 – Ahmad

你是对的。我没有注意到OP中的版本。我试图在1.4.8中实现这一点:) –

Angularjs向链路功能

回答

相关问题