У меня есть plunker этого вопроса на http://plnkr.co/edit/yJNrpATGWY7iUeVcx6lx?p=previewAngularJS директива не работает
index.html:
<!DOCTYPE html>
<html ng-app="ItemEnum">
<head>
<link data-require="[email protected]*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link data-require="[email protected]*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<script data-require="[email protected]*" data-semver="3.0.0" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script data-require="[email protected]" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
<script data-require="[email protected]*" 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, выполняемая директивой, здесь отлично работает. Эта директива более обширна и делает некоторые другие вещи. Тем не менее, plunker показывает основную проблему, которую я испытываю. Я прочитал некоторые другие сообщения SO о директивах, а также прочитал руководство «Угловая директива», но, похоже, не может пройти мимо этой основной проблемы.
Названное по этому вопросу плачевно – boatcoder