为什么自定义下拉列表指令在ngView中不起作用?

时间:2013-10-25 06:28:16

标签: jquery list angularjs angularjs-directive

我使用this guide创建了一个没有dropdown list的自定义select(并非所有浏览器都支持自定义select)。 这种方式结合了一些CSS和jQUery。我为此directive创建了dropdown list,所有内容似乎与Angular一起正常工作,直到我尝试在ng-view内实现它,我呈现的template只是不使用我的解决方案(directive)。

My code - plunk - 在我的插件中,您可以看到index.html中工作dropdown listdropdown list无法在temp.html中工作(呈现给{{ 1}}) ngView都使用相同的dropdown lists

我的index.html:

directive

我的temp.html由路由器呈现给ng-view:

  <body ng-controller='VotesCtrl'>

    <p>This is working (no ng-view):</p>
    <div dropdown id="dd" class="wrapper-dropdown-3" tabindex="1">
      <i class="arrow"></i>
      <span>{{statuses[0]}}</span>
      <ul class="dropdown">
          <li ng-repeat="status in statuses"><a href="#">{{status}}</a></li>
      </ul>
    </div>

    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />

    <div class="content" ng-view></div>  
   </body>

我的代码(包括<p>This is from ng-View, not working:</p> <div dropdown id="dd" class="wrapper-dropdown-3" tabindex="1"> <i class="arrow"></i> <span>{{statuses[0]}}</span> <ul class="dropdown"> <li ng-repeat="status in statuses"><a href="#">{{status}}</a></li> </ul> </div> ):

directive

对于这个问题,或多或少存在类似的问题,但它们对我没有多大帮助。

1 个答案:

答案 0 :(得分:2)

出现错误:DropDown上没有方法“initEvents”。在Javascript中首先定义函数和变量,然后执行代码。因此,在link函数中定义了函数DropDown,但$(function() {...内的代码在定义DropDown原型的代码之前运行

因此,第一个更改是将$(function() {...代码放在原型代码之下。

然后您初始化标识为dd的内容。这个id有两件事,所以jQuery会感到困惑。没有理由这样做;使用链接函数提供的元素参数。

所以第二次改变:

link: function(scope, elem, attrs) {
    ...
    var dd = new DropDown(elem); // NOT $('#dd')
    ...
 }

(因为你在,纠正或删除<div id="dd">事物)

最后,Angular需要找到jQuery,以便上面的elem拥有所有jQuery方法。

所以最终更改:在 Angular上面包含jQuery <script>

参见forked plunk:http://plnkr.co/edit/ffltLZit27EGpW13RmRe?p=preview


现在已经说过,我认为你没有正确使用Angular。我知道,我有jQuery背景,并且在开始时倾向于使用jQuery做所有事情。我建议的改变:

  • 不要使用jQuery事件(除非有一个非常好的理由 - 不是在这种情况下)。使用指令的模板和ng-click而不是$(...).on("click")。 (记住,如果jQuery单击修改模型,则必须使用$scope.$apply()。)
  • $(document).click(function() {部分将在文档上安装N个事件处理程序,每个选择一个。实际上只需要1,所以我将它放在link函数之外。最有可能在指令定义函数中:

    webApp.directive('dropdown', function() {
        $(document).click(function() {
            ...
        });
        return {
            ...
        };
    });
    
  • 使用$(function() {...}是不必要的。在应用指令时,文档将被加载。