Question

我想在DOM Ready时运行一些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准备就绪之前运行，但是当此函数运行时它找不到元素。

注意：元素是<li>元素，使用ng-repeat指令在视图中呈现类hover-brown。

Answer 1

你做了一些概念错误。当你使用角度js时，你应该避免使用＆＃34; jquery pattern＆＃34;将事件分配给DOM。你应该直接在DOM元素上使用指令。

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

同样的方法将用于改变节点的样式。您应该使用一些表示状态的变量（例如活动）并将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'
  };
});

Answer 2

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

Answer 3

在执行Angular中的angular.element之前，

bindJQuery()未设置（Angular 1.4.1，Line 28288）：

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

因此，在文档准备就绪之前，angular.element不可用。

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

在angularjs中运行jquery代码的最佳方法是什么？

3 个答案: