在angularjs中运行jquery代码的最佳方式是什么?

what is the best way to run jquery code in angularjs?

本文关键字：最佳 方式 是什么 代码 angularjs 运行 jquery      更新时间：2023-09-26

我想在DOM就绪时运行一些jquery代码。我使用了

angular.element(document).ready(function() {
$(".hover-brown").mouseover(function(e) {
        if ($(e.target).closest('.hover-yellow').length == 0) {
          $(this).not(".hover-yellow").css("background", "#e8e8e8");
        }
      }).mouseout(function() {
        $(this).not(".hover-yellow").css("background", "white");
      });
    $(".hover-yellow").hover(function() {
      $(this).css("background", "#e8e8e8");
    }, function() {
      $(this).css("background", "white");
    });
});

并尝试了window.load，但它在Dom准备好之前运行，即当此函数运行时它没有找到元素。

注意:这些元素是使用ng-repeat指令在视图中呈现的类为hover-brown的<li>元素。

你犯了一些概念错误。当你使用angular js时，你应该避免"jquery模式"将事件分配给DOM。你应该直接在DOM元素上使用指令。

例如，如果你需要浏览器在鼠标悬停时触发一些自定义代码，你应该在控制器中创建一个函数，并通过ngMouseover指令(https://docs.angularjs.org/api/ng/directive/ngMouseover)分配给一个元素。

同样的方法可以用于更改节点的样式。您应该使用一些表示状态的变量(例如active)，并将css定义绑定到这些变量。

您可以在这里查看:http://codepen.io/anon/pen/gpBEgR

angular.module('demo',  []).controller('MyController', function($scope) {
  $scope.over = function() {
    $scope.style['backgroundColor'] = 'yellow';
  }
  $scope.out = function() {
    $scope.style['backgroundColor'] = 'green';
  }
  $scope.style = { 
    backgroundColor: 'green'
  };
});

在angularjs中使用jquery没有问题，但你应该在上下文中使用它，比如如果它与页面相关，在控制器中使用它。如果它与指令相关，则在指令的链接或控制器函数中使用它。这样，您将确保文档被加载。

angular.element不会被设置，直到在Angular中执行bindJQuery() (Angular 1.4.1, Line 28288):

jqLite(document).ready(function() {
    angularInit(document, bootstrap);
});

所以angular.element在文档准备好之前是不可用的。

你应该防止jQuery的方式来操纵DOM结构。如果您确实想这样做，请将操作移动到指令link函数中。这意味着，将代码$(".hover-brown").mouseover(function(e) {...移动到某个指令link函数。

相关文章：