角指令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

电子邮件输出未定义；但是，它的内容是它上面的行吗？而且，我无法像element.children().children()那样深入钻研它。悬停停止工作。

Answer 1

您不需要在这里进行DOM访问，而只需使用ng事件即可。在您的例子中，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>

​