我在http://plnkr.co/edit/yJNrpATGWY7iUeVcx6lx?p=preview
索引.html：
<!DOCTYPE html>
<html ng-app="ItemEnum">
<head>
<link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link data-require="bootstrap@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<script data-require="bootstrap@*" data-semver="3.0.0" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script data-require="angular.js@1.2.0-rc3-nonmin" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="EnumCtrl">
<ul class="nav">
<li ng-repeat="item in items">
<a ng-href="" di-enum-items di-item-class="link_active">
<span> {{item.name}} ({{item.count}}) </span>
</a>
</li>
</ul>
</div>
</body>
</html>
脚本.js：
angular.module('ItemEnum', [])
.controller('EnumCtrl', function($scope) {
$scope.items = [
{name: 'cars',count: 10},
{name: 'bikes',count: 20}
];
})
.directive('diEnumItems', function() {
return {
restrict: 'A',
scope: {
diItemClass: '='
},
link: function(scope, element, attrs) {
$(element).bind('click', function() {
if ( $(element).hasClass(attrs.diItemClass) ) {
element.removeClass(attrs.diItemClass);
} else {
element.addClass(attrs.diItemClass);
}
});
}
};
});
样式.css：
/* Styles go here */
.link_active {
color: red;
}
不知何故，角度指令搞砸了链接枚举。我究竟做错了什么？请注意，我不是在寻找一个答案来告诉我有一种更简单的方法可以做到这一点。我知道我可以创建一个仅作用于 css 类的指令——除了 css 类操作之外，该指令执行的操作在这里也可以正常工作。该指令更广泛，并做了一些其他的事情。但是，plunker 显示了我遇到的基本问题。我已经阅读了其他一些关于指令的 SO 帖子以及 Angular Directive 指南，但似乎无法解决这个基本问题。