Question

我一直试图通过将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/

Answer 1

万一你真的想要制作一个下拉菜单，而不是弄清楚transclude如何运作，这里有一个更简单的方法;

查看

<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/

当transclude设置为true时，Elem绑定不起作用

1 个答案: