如何在JQuery选择器中调用递归函数_Jquery_Angularjs_Recursion_Selector

如何在JQuery选择器中调用递归函数

jquery angularjs recursion

如何在JQuery选择器中调用递归函数,jquery,angularjs,recursion,selector,Jquery,Angularjs,Recursion,Selector,我有11个仪表盘，我想按顺序显示。因此，我的html代码如下所示： <button type="button" class="btn btn-default" ng-model="settings.isBigger" ng-disabled="false" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false" tooltip="{{settings.maximized ? 'Minimize in Orde

我有11个仪表盘，我想按顺序显示。因此，我的html代码如下所示：

   <button type="button" class="btn btn-default" ng-model="settings.isBigger" ng-disabled="false" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false" tooltip="{{settings.maximized ? 'Minimize in Order': 'Maximize in Order'}}" tooltip-placement="bottom">
   <i class="icon-resize-full-alt"></i>
    </button>

link: function (scope, elem, attrs, controller) {
    elem.on('$destroy', function () {
        $log.log("I am here");
    });
    scope.$watch('settings.isBigger', function () {
        $(".dashboard").each(function (index) {
            function inOrder() {
                $(this).addClass("maximize" + index)
                setTimeout(function () {
                    $(this).removeClass("maximize" + index)
                    $(this).addClass("maximize" + index + 1)
                }, 3000)
            };
            return inOrder;
        })
    });
}

我的ng型号代码如下所示：

   <button type="button" class="btn btn-default" ng-model="settings.isBigger" ng-disabled="false" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false" tooltip="{{settings.maximized ? 'Minimize in Order': 'Maximize in Order'}}" tooltip-placement="bottom">
   <i class="icon-resize-full-alt"></i>
    </button>

link: function (scope, elem, attrs, controller) {
    elem.on('$destroy', function () {
        $log.log("I am here");
    });
    scope.$watch('settings.isBigger', function () {
        $(".dashboard").each(function (index) {
            function inOrder() {
                $(this).addClass("maximize" + index)
                setTimeout(function () {
                    $(this).removeClass("maximize" + index)
                    $(this).addClass("maximize" + index + 1)
                }, 3000)
            };
            return inOrder;
        })
    });
}

我的代码不起作用。

您能帮助我吗？

一般来说，在使用angular时，您不需要使用jQuery，因为有两个原因：

angular 1嵌入了jQlite，它是jQuery的一个子集，对于任何用例都应该足够了。要使用它，只需将$变量替换为angular.element

例如，

$（“.dashboard”）。每个（…）

都将变成

angular.element（“.dashboard”）。每个（…）

。这有助于降低页面加载时间，因为不需要加载jQuery脚本

使用angular，您不需要（并且应该始终避免）编写代码来操作DOM。html应该声明性地响应模型（范围）的更改

因此，对于您的情况，我想您的工作范围内有一个仪表盘列表要显示，例如：

$scope.dashboards = [
 {name: 'Top Five cities'},
 {name: 'Sales of the month'},
 {name: 'Top 10 Product Categories'}
];

然后，您将沿着最大化/最小化复选框以这种方式显示它们：

<button ng-model="settings.isBigger" ...>Maximize/Minimize</button>
<ul>
  <li ng-repeat="dashboard in dashboards" ng-class="{'maximize': settings.maximizeDashboards}">
    {{dashboard.name}}
  </li>
</ul>

在这种情况下，控制器会在3秒钟后设置大小设置，html会通过删除“最大化”css类来响应该设置。