Question

我在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指南，但似乎无法解决这个基本问题。

Answer 1

您正在指令上创建一个新的范围，它会搞砸ng-href渲染。在这种情况下，我真的没有看到为什么你需要一个示波器的原因，因为你无论如何都要使用它，所以我把它删除了。立即行动。

http://plnkr.co/edit/6ocoBa9yTQWMeL95O5Yw?p=preview

AngularJS指令不起作用

1 个答案: