当translude设置为true时，Elem绑定不工作

Elem bind not working when transclude is set to true

本文关键字：Elem 绑定 工作 translude 设置 true      更新时间：2023-09-26

我一直在尝试超越元素的内容，并通过将click事件绑定到元素的一个子元素来操纵它的显示属性。但它似乎不起作用。

app.directive('apple', function(){
  function link(scope, elem, attr, ctrl, transclude) {
    elem('a.link').bind('click', function() {
      ('ul.menu').toggleClass('active');
    });
    transclude(scope, function(clone) {
      elem.html(clone);
    });
  }
  return {
    restrict: 'E',
    transclude: true,
    link: link
  };
});
HTML: 

<apple>
  <a class="link" href="#">Show</a>
  <ul class="menu">
    <li>linky</li>
  </ul>
</apple>

知道是怎么回事吗?小提琴链接:http://jsfiddle.net/pb2q4zj4/1/

如果你真的想做一个下拉菜单，而不是研究transclude是如何工作的，这里有一个更简单的方法;

<<p> 视图/strong> 
<div ng-app ng-init="show=false">
    <div>
      <a ng-click="show = !show">Show</a>
      <ul ng-show="show">
        <li>linky</li>
      </ul>
    </div>
</div>

JS 

angular.module('app', []);
http://jsfiddle.net/4oq1zLsg/

相关文章：