Javascript Angular：通过DOM操作实现ng click-in指令？

我是一个棱角分明的新手，我正在努力解决我认为是标准问题的问题

我试图实现的是一个名为“clicker”的自定义指令，该指令将包含在“ul ng repeat”html元素中

下面是一个我如何想象我的HTML的示例：

<ul ng-repeat="item in items">
    <clicker>{{item}}</clicker>
    ...
</ul>

{{item}}
...

为此，我创建了一个自定义指令“clicker”，如下所示：

myModule.directive('clicker', function() {
return {
    restrict : 'E',
    replace : true,
    transclude: true,
    scope : true,
    template : '<li><a ng-click="showMeClicked()" ng-transclude></a></li>',

    controller: function($scope, $element, $document){
            var test = {}; //In debug $scope, $element, $document are injected here!

           $scope.showMeClicked = function ($scope, $element, $document) {
               //In debug all $scope, $element, $document are undefined here!

               //This line works and deletes all class properties of my <li> along with id properties of their
               //child <a> element. Since $element is undefined this code was the only way I manage to do that action.
               angular.element(document.querySelectorAll('.button_selected')).removeClass('button_selected').children().removeAttr('id');

               //This code does not work since $element is undefined!
               $element.addClass('button_selected');
               $element.children().prop('id', 'button_selected_font');

               //My expected result is:
               //'<li class="button_selected">'
               //     '<a id="button_selected_font" ng-click="showMeClicked()" ng-transclude></a>'
               //'</li>'
           };
         }
};
});

myModule.directive（'clicker'，function（）{
返回{
限制：'E'，
替换：正确，
是的，
范围：正确，
模板：“
”，
控制器：函数（$scope、$element、$document）{
var test={}；//在调试$scope中，$element，$document被注入到这里！
$scope.showMeClicked=函数（$scope、$element、$document）{
//在调试中，此处未定义所有$scope、$element、$document！
//这一行工作并删除my
的所有类属性以及它们的id属性
//由于$element是未定义的，所以这段代码是我执行该操作的唯一方法。
元素（document.querySelectorAll（'.button_selected'））.removeClass（'button_selected'）.children（）.removeAttr（'id'）；
//由于$element未定义，因此此代码不起作用！
$element.addClass（'button_selected'）；
$element.children（）.prop（'id'，'button_selected_font'）；
//我的预期结果是：
//“
”
//     ''
//“
”
};
}
};
});

我想做的是让我的“clicker”元素可以点击，点击它们后，我想改变它们在屏幕上的外观。基本上，我需要的是$element被正确地注入到showMeClicked函数中，这样我就可以使用它来设置列表的“class”和锚的“id”。我试图在示例代码中给出好的注释

我尝试使用link函数而不是controller函数，但是当前元素也没有被注入其中。我为我的指令提供的scope:true属性只是一个示例，如果需要，它可能会被更改

我试图避免使用jQuery，而是使用Angular的jqLite

有人有什么建议吗

提前谢谢

编辑：目前我没有在我的“ul”上使用ng repeat指令。相反，我手动声明了9个“clicker”标记。结果，在我生成的HTML中，标记被指令中正确的代码替换，我看到一个“li”的列表。你可以在这里看到我的“ul”内容：pastebin.com/JPFqcnSU

当我单击任何链接时，它会导致预期的异常：

无法访问未定义的的addClass

---

您需要通过传递索引来访问当前元素：

$element[0].style...

Javascript

var-app=angular.module（'myApp'，[]）；
函数MyController（）{
var vm=这个；
这个项目=[“a”、“b”、“c”、“d”、“e”]；
}
app.controller（'MyController'，[MyController]）
.directive（'clicker'，function（）{
返回{
限制：'E'，
替换：正确，
是的，
范围：正确，
模板：“
”，
链接：功能（范围、要素、单据）{
scope.showMeClicked=函数（）{
元素[0]。style.backgroundColor='red'；
元素（元素[0]）.find（'a'）.addClass（'magic'）；
}
}
}
});

HTML

{{item}}

---

现在发生了什么？您看到模板中出现的指令了吗？@Augier目前我没有在我的

上使用ng repeat指令。相反，我故意声明了9个标签。结果，在我生成的HTML中，标记被指令中正确的代码替换，我看到了
• s的列表。你可以在这里看到我的
  内容：非常感谢，成功了！。似乎我需要的是link函数而不是controller函数，我需要通过传递索引来访问当前元素。现在DOM操作做得很好。谢谢

  var app = angular.module('myApp',[]);
  
  function MyController(){
      var vm = this;
  
      this.items = ["a","b","c","d","e"];
  }
  
  app.controller('MyController',[MyController])
  .directive('clicker',function() {
      return {
          restrict : 'E',
          replace : true,
          transclude: true,
          scope : true,   
          template : '<li><a href="#" ng-click="showMeClicked()" ng-transclude></a></li>',
          link: function(scope,element,doc) {
              scope.showMeClicked = function() {
                   element[0].style.backgroundColor = 'red';
                   angular.element(element[0]).find('a').addClass('magic');
              }
          }
      }
  });
  

  <div ng-app="myApp" ng-controller="MyController as vm">
      <div ng-repeat="item in vm.items">
          <clicker>{{item}}</clicker>
      </div>
  </div>