この問題については、 http: //plnkr.co/edit/yJNrpATGWY7iUeVcx6lx?p=preview にプランカーがあります。
index.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>
script.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);
}
});
}
};
});
style.css :
/* Styles go here */
.link_active {
color: red;
}
どういうわけか、角度ディレクティブがリンク列挙を台無しにしています。私は何を間違っていますか？これを行うためのより簡単な方法があることを教えてくれる答えを探しているわけではないことに注意してください。css クラスだけで動作するディレクティブを作成できることはわかっています。ディレクティブが実行する css クラス操作に加えて、ここでは問題なく動作しています。このディレクティブはより広範で、他のことを行います。ただし、プランカーは私が抱えている基本的な問題を示しています。ディレクティブに関する他のSOの投稿を読んだり、Angular Directiveガイドを読んだりしましたが、この基本的な問題を乗り越えることができないようです。