Question

我有11个仪表板，我想显示inOrder。所以我的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>

最大化课程：页面扩展。

$（“。dashboard”）.class中的jQuerySelectors（所有带有class = dashboard的元素）

所以每个演示文稿应该花3秒钟，所以我使用了setTimeout。

相同的过程将是连续的，因此我的函数必须是递归的。

//$(".dashboard").each(function (index) . This code my foreach loop in dashboards.

和我的ng-model代码如下：

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;
        })
    });
}

我的代码不起作用。你能帮帮我吗？

Answer 1

作为一般规则，在使用angular时不需要使用jQuery，因为有两件事：

angular 1嵌入jQlite，jQlite是jQuery的一个子集，应该足以满足任何用例。要使用它，只需用 angular.element 替换 $ 变量。

因此，例如$(".dashboard").each(...)将成为angular.element('.dashboard').each(...)。这有助于保持页面加载时间较短，因为您不需要加载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>

请注意我是如何使用ng-class设置最大化css类的。如果settings.maximizeDashboards == true，那么将添加css类，否则它将被删除，因此您的仪表板将相应地变大或变小。

现在唯一剩下的就是为settings.maximizeDashboards设置一个值。我可以在ng-class属性中使用了settings.isBigger，但是你的要求是在3秒后调整仪表板的大小，让我们这样做。在您的控制器中，只需添加：

$scope.$watch(function() {return settings.isBigger;}, function(newValue) {
   if( newValue ) {
     settings.maximizeDashboards = true;
     $timeout(function() {
       settings.isBigger = false;           
       settings.maximizeDashboards = false;
     }, 3000)
   }
});

在这种情况下，控制器会在3秒后执行设置大小设置的逻辑，并且html通过删除“最大化”css类来响应它。

如何在JQuery Selector中调用递归函数

1 个答案: