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>