Question

我无法找到一个很好的资源，向我解释如何使用angular操作DOM元素：

如何在页面上选择特定元素？

<span>This is a span txt1</span>
<span>This is a span txt2</span>
<span>This is a span txt3</span>
<span>This is a span txt4</span>

<p>This is a p txt 1</p>

<div class="aDiv">This is a div txt</div>

Exp：使用jQuery，如果我们想从点击的跨度中获取文本，我们可以简单地写一下：

$('span').click(function(){
    var clickedSpanTxt = $(this).html(); 
    console.log(clickedSpanTxt);
});

我如何在Angular中做到这一点？

我理解使用＆＃39;指令＆＃39;是操纵DOM的正确方法，所以我正在尝试：

var myApp = angular.module("myApp", []);

myApp.directive("drctv", function(){

  return {
    restrict: 'E',
    scope: {},
    link: function(scope, element, attrs){
      var c = element('p');
      c.addClass('box');
    }
  };
});

HTML：

<drctv>
<div class="txt">This is a div Txt</div>

<p>This is a p Txt</p>

<span>This is a span Txt </span>
</drctv>

如何仅选择＆＃39; p＆＃39;元素来自＆＃39; drctv＆＃39;？

Answer 1

由于element是一个jQuery-lite元素（如果你在应用程序中包含了jQuery库，则为jQuery元素），你可以使用find方法获取里面的所有段落： element.find('p')

Answer 2

要回答您的第一个问题，在Angular中，您可以使用内置指令ng-click挂钩点击事件。因此，每个span元素都有一个ng-click属性，可以调用click函数：

<span ng-click="myHandler()">This is a span txt1</span>
<span ng-click="myHandler()">This is a span txt2</span>
<span ng-click="myHandler()">This is a span txt3</span>
<span ng-click="myHandler()">This is a span txt4</span>

然而，这并不是很好，因为有很多重复，所以你可能会继续使用另一个Angular指令ng-repeat来处理重复你的span元素。现在你的html看起来像这样：

<span ng-repeat="elem in myCollection" ng-click="myHandler($index)">This is a span txt{{$index+1}}</span>

对于你问题的第二部分，我可能会提供一个＆＃39; Angular＆＃39;如果我们知道你想要做什么，那么做事的方式就是＆＃39; p＆＃39; element - 否则你仍然可以使用Angular提供的jQuery lite来执行jQuery选择（参见Jamie Dixon的答案）。

如果你按照预期的方式使用Angular，你可能会发现你不需要直接使用jQuery！

Answer 3

首先应该避免使用DOM操作。 AngularJS是一个MVC框架。您从模型中获取数据，而不是从视图中获取数据。你的例子在AngularJS中看起来像这样：

控制器：

// this, in reality, typically come from the backend
$scope.spans = [
    {
        text: 'this is a span'
    },
    {
        text: 'this is a span'
    },
    {
        text: 'this is a span'
    }
];

$scope.clickSpan = function(span) {
    console.log(span.text);
}

视图：

<span ng=repeat="span in spans" ng-click="clickSpan(span)">{{ span.text }}</span>

Answer 4

ng-click是一个更简单的解决方案，只要我不明白你想做什么，我只会尝试解释如何执行与你用jquery显示的相同的东西。

因此，要显示已单击的项目的内容，您可以使用ng-click指令并通过$ event参数请求事件对象，请参阅https://docs.angularjs.org/api/ng/directive/ngClick

所以这是html：

<div ng-controller="foo">
  <span ng-click="display($event)" >This is a span txt1</span>
  <span ng-click="display($event)" >This is a span txt2</span>
  <span ng-click="display($event)" >This is a span txt3</span>
  <span ng-click="display($event)" >This is a span txt4</span>

  <p>This is a p txt 1</p>

  <div class="aDiv">This is a div txt</div>
</div>

这里是javascript

var myApp = angular.module("myApp", []);

myApp.controller(['$scope', function($scope) {
  $scope.display = function (event) {
    console.log(event.srcElement.innerHtml);
    //if you prefer having the angular wrapping around the element
    var elt = angular.element(event.srcElement);
    console.log(elt.html());
  }
}]);

如果你想进一步挖掘角度，这是简单的ng-click做什么

.directive('myNgClick', ['$parse', function ($parse) {
  return {
    link: function (scope, elt, attr) {
      /*
       Gets the function you have passed to ng-click directive, for us it is 
       display
       Parse returns a function which has a context and extra params which 
       overrides the context
      */
      var fn = $parse(attr['myNgClick']);

      /* 
      here you bind on click event you can look at the documentation
      https://docs.angularjs.org/api/ng/function/angular.element
      */
      elt.on('click', function (event) {

        //callback is here for the explanation
        var callback = function () {

          /*
           Here fn will do the following, it will call the display function
           and fill the arguments with the elements found in the scope (if 
           possible), the second argument will override the $event attribute in 
           the scope and provide the event element of the click
          */
          fn(scope, {$event: event});
        }

        //$apply force angular to run a digest cycle in order to propagate the 
        //changes
        scope.$apply(callback);
      });
    }
  }
}]);

plunkr：http://plnkr.co/edit/MI3qRtEkGSW7l6EsvZQV?p=preview 如果你想测试一下

如何使用Angular操作DOM元素

4 个答案: