我使用this guide创建了一个没有dropdown list
的自定义select
(并非所有浏览器都支持自定义select
)。
这种方式结合了一些CSS
和jQUery。我为此directive
创建了dropdown list
,所有内容似乎与Angular
一起正常工作,直到我尝试在ng-view
内实现它,我呈现的template
只是不使用我的解决方案(directive
)。
My code - plunk - 在我的插件中,您可以看到index.html中工作dropdown list
和dropdown 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
对于这个问题,或多或少存在类似的问题,但它们对我没有多大帮助。
答案 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做所有事情。我建议的改变:
ng-click
而不是$(...).on("click")
。 (记住,如果jQuery单击修改模型,则必须使用$scope.$apply()
。) $(document).click(function() {
部分将在文档上安装N个事件处理程序,每个选择一个。实际上只需要1,所以我将它放在link
函数之外。最有可能在指令定义函数中:
webApp.directive('dropdown', function() {
$(document).click(function() {
...
});
return {
...
};
});
使用$(function() {...}
是不必要的。在应用指令时,文档将被加载。