Angular＆jQuery选择器

Question

我正在调整一个相当新的应用程序角度。

在这个程序中，我有一个菜单在左边。当用户点击左侧菜单中的类别时，应用程序的中心部分会发生变化。没有什么复杂的。

角之前，我曾经明确地写在标签左侧菜单中的每一个元素：

<li class="menu-element" data-category="home"><a href="#"><span class="glyphicon glyphicon-home"></span>Home</a> 
</li> 
<li class="menu-element" data-category="news"><a href="#"><span class="glyphicon glyphicon-comment"></span>News</a> 
</li> 
<li class="menu-element" data-category="brands"><a href="#"><span class="glyphicon glyphicon-tower"></span>Brands</a> 
</li> 
<li class="menu-element" data-category="activity"><a href="#"><span class="glyphicon glyphicon-flash"></span>Activity</a> 
</li> 
[...] 

然后用jQuery添加行为：

$(".menu-element").click(function() { 
    [..] 
}); 

现在，我的角度重写。我在一个控制器声明菜单元素：

var ambasdrApp = angular.module('myApp', []); 
myApp.controller('categoryListCtrl', function ($scope) { 
    $scope.categories = [ 
    {'category': 'home',  icon :'home',  text: 'Home'}, 
    {'category': 'news',  icon :'comment', text: 'News'}, 
    {'category': 'brands',  icon :'tower', text: 'Brands'}, 
    {'category': 'activity', icon :'flash', text: 'Activity'}, 

    ]; 
}); 

然后我用NG-重复指令替换HTML标签：

<li ng-repeat="category in categories" class="menu-element ng-scope" data-category="{{category.category}}"> 
    <a href="#"><span class="glyphicon glyphicon-{{category.icon}}"></span>{{category.text}}</a> 
</li> 

它的工作原理：该元素在左边的菜单看起来像以前一样。

问题：添加“onClick”行为的jQuery代码片段不再有效。我想，当jQuery的一段代码执行，菜单元素还不存在。

• 一种解决方法是在ng-repeat指令中添加onClick=""。这会产生一些<li onClick="[...]">，但我认为它是邪恶的。我宁愿在* .js文件中隔离js。
• 另一个解决方案是在执行ng-repeat指令后执行JQuery代码片段，但我不知道如何挂钩。

您将如何使它工作？

Answer 1

对于每一个对象在你categories，你可以添加一个名为click新属性定义的功能：

$scope.categories = [ 
    {'category': 'home',  icon :'home',  text: 'Home', click:function() {...}}, 
... 

然后在您的标记，可以使用ng-click指令，并做一些事情，如：

<li ng-repeat="category in categories" class="menu-element ng-scope" data-category="{{category.category}}" ng-click="category.click()"> 

Answer 2

我同意使用ng-click的HTML中的@rchang解决方案。

它可以在角代码本身虽然得到改善，因为你显然不写为每个类别的自定义功能，所以直接在数组中没有需要多个声明或赋值：

var ambasdrApp = angular.module('myApp', []); 
myApp.controller('categoryListCtrl', function ($scope) { 

    $scope.categories = [ 
     ... 
    ]; 

    $scope.yourFunction = function() { 
     // your code here 
    }; 

}); 

而且在HTML当然纳克单击：

<li ng-repeat="category in categories" ng-click="yourFunction()" class="menu-element ng-scope" data-category="{{category.category}}"> 

一个推荐AngularJS做法也将数据附加到它的控制器，以避免在大的HTML其中覆瓦状排列的多个控制器和指令混乱。

所以，你会申报类别和你的函数是这样的：

myApp.controller('categoryListCtrl', function() { 

    this.categories = [ 
    ... 
    ]; 

    this.yourFunction = function(params) { 
     // your code here 
    }; 

}); 

然后再通过控制器的名字称呼他们：

<li ng-repeat="category in categoryListCtrl.categories" ng-click="categoryListCtrl.yourFunction()" class="menu-element ng-scope" data-category="{{category.category}}"> 

它可能不是对你有用，虽然，但是这种书写方式对于避免混淆和碰撞是有用的，通常如下：

<div ng-controller="GrandPaCtrl"> 
    {{ text }} 
    <div ng-controller="ParentCtrl"> 
     {{ text }} - {{ $parent.text }} 
     <div ng-controller="ChildCtrl">  
      {{ text }} - {{ $parent.text }} - {{ $parent.$parent.text }} 
     </div> 
    </div> 
</div>