Question

我有一个嵌套（第三级）菜单列表，背面有一个jquery点击事件。单击菜单项时，不会触发jQuery单击。如果HTML中的值是静态的，那么jQuery事件很有效。

HTML：

<div>
<ul class="collapsible-list" ng-controller="ViewCtrl">
    <li class="collapsible-list-subnav" ng-repeat="view in views">
        <a class="collapsible-list-parent">{{view.name}}</a>
        <ul class="collapsible-list secondary">
            <li class="collapsible-list-subnav">
                <a class="collapsible-list-parent">Public Views</a>
                <ul class="collapsible-list tertiary">
                    <li ng-repeat="publicview in view.publicviews">
                        <a>{{publicview.title}}</a>
                    </li>
                </ul>
            </li>
            <li class="collapsible-list-subnav">
                <a class="collapsible-list-parent">Private Views</a>
                <ul class="collapsible-list tertiary">
                    <li ng-repeat="privateview in view.privateviews">
                        <a>{{privateview.title}}</a>
                    </li>
                </ul>
            </li>   
        </ul>
    </li>
</ul>

使用Javascript：

define([ 'angular', 'controllers-module'], function(angular,
    controllers) {

    controllers.controller("ViewCtrl", [
        "$scope",
        "$rootScope",
        "directiveBinder",
        '$timeout',
        '$stateParams',
        '$resource',
        '$state',
        function($scope, $rootScope,directiveBinder, $timeout, $stateParams, $resource, $state) {

            $scope.engines = [ {
            name : 'name1',
            publicviews : [ {
                title : 'First public View'
            } ],
            privateviews : [ {
                title : 'First private View'
            } ]
        }, {
            name : 'name2',
            publicviews : [ {
                title : 'Second public View'
            } ],
            privateviews : [ {
                title : 'Second private View'
            } ]
        } ];

        $('.collapsible-list-parent').click(function(e) {
            e.preventDefault();
            $(this).next().slideToggle('fast');
            if ($(this).parent().hasClass('open')) {
                $(this).parent().removeClass('open');
            } else {
                $(this).parent().addClass('open');
            }
        });
    });

Answer 1

因为通过ng-repeat动态添加元素，所以.click事件不会绑定到它们。尝试使用.delegate

$( "ul" ).delegate( ".collapsible-list-parent", "click", function() {
  // code here
});

Answer 2

当我们使用ng-repeat并需要触发jquery点击事件时，试试这个对我有用。

$(document).on("click", ".className", function() {

//your code here...

});

Answer 3

我不认为在angularjs控制器中使用jQuery代码是正确的方法，在没有动画的情况下做同样的示例就像

var app = angular.module('my-app', [], function() {

})

app.controller('ViewCtrl', function($scope) {
  $scope.views = [{
    name: 'name1',
    publicviews: [{
      title: 'First public View'
    }],
    privateviews: [{
      title: 'First private View'
    }]
  }, {
    name: 'name2',
    publicviews: [{
      title: 'Second public View'
    }],
    privateviews: [{
      title: 'Second private View'
    }]
  }];
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app">
  <ul class="collapsible-list" ng-controller="ViewCtrl">
    <li class="collapsible-list-subnav" ng-repeat="view in views">
      <a class="collapsible-list-parent" ng-click="open = !open">{{view.name}}</a>
      <ul class="collapsible-list secondary" ng-show="open">
        <li class="collapsible-list-subnav">
          <a class="collapsible-list-parent" ng-click="popen = !popen">Public Views</a>
          <ul class="collapsible-list tertiary" ng-show="popen">
            <li ng-repeat="publicview in view.publicviews">
              <a>{{publicview.title}}</a>
            </li>
          </ul>
        </li>
        <li class="collapsible-list-subnav">
          <a class="collapsible-list-parent" ng-click="ropen = !ropen">Private Views</a>
          <ul class="collapsible-list tertiary" ng-show="ropen">
            <li ng-repeat="privateview in view.privateviews">
              <a>{{privateview.title}}</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

如果您想使用动画，可以使用使用css3动画的angularjs animation。

jquery click事件不能与angular.js ng-repeat一起使用

3 个答案: