Angular Directive DOM操作行为

Question

我在指令中使用DOM操作有一些意想不到的行为.我有两个图标,想要图标,电话和电子邮件,并希望在悬停时显示其内容.哪个应该足够简单,但是我无法遍历DOM以达到子元素.

这是我的指令:

app.directive('contact', function () {
return {
    restrict: 'E',
    scope: {
      email:'@',
      phone: '@',
      extension: '@'
    },
    link: function (scope, element, attrs) {
        var el = element;
        var kids = $(el).children();
        var emailChild = $(kids[0]);
        var email = emailChild.context.children[0];

        element.children().bind('mouseenter', function() {
                console.log(this);
                console.log(emailChild.context.children[0]);
                console.log(email);
            });
    },


    template: '<div class="contact_methods">' +
              '<div ng-if="email" class="email" href="#">' +
              '<div class="contact_info_email more_info" style="display:none;"><a ng-href="mailto:{{email}}">{{email}}</a></div>' +
              '</div>&nbsp;&nbsp;' +
              '<div ng-if="phone" class="phone" href="#"> ' +
              '<div class="contact_info_phone more_info">{{phone}} ext.{{extension}}</div>' +
              '</div>' +
              '</div>'


}

});

这是意外的行为:

console.log(this);
console.log(emailChild.context.children[0]);
console.log(email);

这些评估为:

 <div class=?"contact_methods">?…?</div>?
 <div ng-if=?"email" class=?"email ng-scope" href=?"#">?…?</div>?
 undefined

电子邮件输出undefined; 然而,它的内容是它上面的线？另外,我无法像element.children().children()一样深入研究它？悬停停止工作.

Answer 1

您不需要在此处进行DOM访问,而只需使用ng-events.在你的情况下ng-mouseenter ng-mouseleave结合ng-show.

 <div ng-if="email" class="email" href="#" 
      ng-mouseenter="toggleEmail(true)" ng-mouseleave="toggleEmail(false)">Email 
      <div class="contact_info_email more_info" ng-show="displayEmail">
         <a ng-href="mailto:{{email}}">{{email}}</a></div>

并在链接功能:

link: function (scope, element, attrs) {
  scope.toggleEmail = function(shouldShow){
    scope.displayEmail = shouldShow;
  }
},

示例演示

angular.module('app', []).controller('ctrl', function($scope) {
  $scope.email = "aaa@aa.com";
  $scope.phone = "111-222-3333";
}).directive('contact', function() {
  return {
    restrict: 'E',
    scope: {
      email: '@',
      phone: '@',
      extension: '@'
    },
    link: function(scope, element, attrs) {
      scope.toggleEmail = function(shouldShow) {
        scope.displayEmail = shouldShow;
      }
    },


    template: '<div class="contact_methods"> \
              <div ng-if="email" class="email" href="#" ng-mouseenter="toggleEmail(true)" ng-mouseleave="toggleEmail(false)">Email \
             <div class="contact_info_email more_info" ng-show="displayEmail"><a ng-href="mailto:{{email}}">{{email}}</a></div> \
             </div>&nbsp;&nbsp; \
             <div ng-if="phone" class="phone" href="#">Phone \
              <div class="contact_info_phone more_info">{{phone}} ext.{{extension}}</div> \
              </div> \
              </div>'


  }

});;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <contact email="{{email}}" phone="{{phone}}"></contact>
</div>

我甚至会为这个指令使用一个控制器,并在那里设置范围方法和变量.此外,您可以将模板放在外部而不是内联模板,因为它更大,难以在javascript文件中维护.

您的方法的问题是您在这里选择了错误.因为实际的根将是元素<contact所以孩子不是你所期望的.还记得你不需要再次换行element,$(element)因为它已经是一个jquery包装器元素(如果你在angular之前包含了jquery).所以你也可以这样做(尽管我会重新考虑这样做):

 //Let the directive render DOM first
 $timeout(function() {
    element.find('.email, .phone').bind('mouseenter mouseleave', function() {
      $(this).children().toggle()
    });
  });

angular.module('app', []).controller('ctrl', function($scope) {
  $scope.email = "aaa@aa.com";
  $scope.phone = "111-222-3333";
}).directive('contact', function($timeout) {
  return {
    restrict: 'E',
    scope: {
      email: '@',
      phone: '@',
      extension: '@'
    },
    link: function(scope, element, attrs) {
      $timeout(function() {
        element.find('.email, .phone').bind('mouseenter mouseleave', function() {
          $(this).children().toggle()
        });
      });
    },
    template: '<div class="contact_methods">' +
      '<div ng-if="email" class="email" href="#"> Email' +
      '<div class="contact_info_email more_info" style="display:none;"><a ng-href="mailto:{{email}}">{{email}}</a></div>' +
      '</div>&nbsp;&nbsp;' +
      '<div ng-if="phone" class="phone" href="#"> Phone' +
      '<div class="contact_info_phone more_info" style="display:none;">{{phone}} ext.{{extension}}</div>' +
      '</div>' +
      '</div>'
  }

});;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <contact email="{{email}}" phone="{{phone}}"></contact>
</div>