在控制器异步调用后添加CSS样式的首选AngularJS方式是什么?

What is the preferred AngularJS way of adding CSS styling after Controller asynchronous call?

本文关键字：AngularJS 方式 是什么 样式 异步 控制器 调用 CSS 添加      更新时间：2023-09-26

我正在用NW.js和AngularJS构建一个应用程序GitHub Link

我的应用程序从本地文件夹检索文件名，并在应用程序中以列表的形式显示这些文件名。我希望列表中的第一个项目看起来与其他项目不同，因为它开始为"选定"按钮/项目。文件数据是异步的。

目前，我将文件数据作为一个服务加载，该服务在控制器中提取文件名。因为文件数据使用异步函数，所以我把它放在async中。控制器内的系列调用。这个异步调用完成后，ng-bind生效，列表显示在我的应用程序中。

我已经尝试添加不同的指令来将所选类添加到第一个项目，但它们都在列表显示在屏幕上之前被调用。

有人可以帮助我了解什么是首选的angularjs方式设置类或css属性的元素后，它已被绑定到数据?

下面是相关代码。要获得完整的项目，请点击上面的GitHub链接。

h2控制器

fileVizApp.controller("fileVizController", function ($scope, configs, consoles, $location) {
    var async = require('async');
    var filehelper = require('filehelper');
    var consoleKeys = [];
    for(var key in consoles) {
        consoleKeys.push(key);
    }
    async.each(consoleKeys, function(currConsole, callback) {
        filehelper.GetItemList(consoles, currConsole, callback);
        var a = 9;
    }, function(err) {
        if(err) {
            return next(err);
        }
        $scope.headerSrc = "tmpl/header.html";
        $scope.configs = configs;

        $scope.back = function () {
            window.history.back();
        };
        $scope.getCount = function (n) {
            return new Array(n);
        }
        $scope.isActive = function (route) {
            return route === $location.path();
        }
        $scope.isActivePath = function (route) {
            return ($location.path()).indexOf(route) >= 0;
        }
        $scope.$apply( function () {
            $scope.consoles = consoles;
             if(consoles.length > 0) {
                $scope.currConsoleInd = 0;
                if(consoles.length > 1) {
                    $scope.nextConsoleInd = 1;
                    $scope.prevConsoleInd = consoles.length - 1;
                } else {
                    $scope.nextConsoleInd = -1;
                    $scope.prevConsoleInd = -1;
                }
            }
            else {
                $scope.nextConsoleInd = -1;
                $scope.prevConsoleInd = -1;
            }
        });

        $scope.$broadcast("Consoles_Ready");
    });
});
有关HTML 

<!-- index.html -->
<!DOCTYPE html>
<html data-ng-app="fileVizApp">
<head>
    <title>File Visualizer</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/app.css">
    <link rel="stylesheet" type="text/css" href="css/sidebar.css">
    <script type="text/javascript" src="js/lib/angular.min.js"></script>
    <script type="text/javascript" src="js/lib/angular-resource.min.js"></script>
    <script type="text/javascript" src="js/lib/angular-route.min.js"></script>
    <script type="text/javascript" src="js/lib/jquery.min.js"></script>
    <script type="text/javascript" src="js/lib/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/lib/ui-bootstrap-custom-tpls-0.13.0.min.js" ></script>
    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/service/services.js"></script>
    <script type="text/javascript" src="js/controller/controllers.js"></script>
    <script type="text/javascript" src="js/router/routes.js"></script>
    <script type="text/javascript" src="js/directive/directives.js"></script>    
</head>
<body class="container" data-ng-controller="fileVizController" main-directive>
    <div data-ng-include src="headerSrc"></div> 
    <div id="container">
        <div data-ng-view=""></div>
    </div>
</body>
</html>

<!-- home.html-->
<div class="">
    <!-- Sidebar -->
    <ym-gamelist/>
    <!-- /#sidebar-wrapper -->
</div>

<!-- itemlist.html -->
<div id="sidebar-wrapper">
    <ul class="sidebar-nav">
        <div ng-repeat="thisConsole in consoles">
            <div ng-repeat="item in thisConsole.items" button-repeat>
                <li>
                    <a class="itembutton" href="#"><span ng-bind="item"></span></a>
                </li>
                <li class="divider"></li>
            </div>
        </div>
    </ul>
</div>

指令

fileVizApp.directive('ymGamelist', function() {
  return {
    restrict: 'AE',
    scope: {},
    controller: 'fileVizController',
    link: function(scope, element, attrs) {
        scope.$on('Consoles_Ready', function () {
            var newa = 1;
        });
    },
    compile: function (element, attrs) { 
        return {
            pre: function(scope, iElem, iAttrs){
                console.log(name + ': pre link => ' + iElem.html());
            },
            post: function(scope, iElem, iAttrs){
                console.log(name + ': post link => ' + iElem.html());
            }
        }
    },
    templateUrl: 'tmpl/itemlist.html'
  };
});
fileVizApp.directive('buttonRepeat', function($compile) {
  return function(scope, element, attrs) {
      if(scope.$last) {
        scope.$emit('Itemlist_Loaded');
      }
  };
});
fileVizApp.directive('mainDirective', function() {
  return function(scope, element, attrs) {
      scope.$on('Itemlist_Loaded', function (event) {
        $('.gamebutton').first().addClass('selectedbutton');
      });
  };
});

使用ng-repeat和ng-class内部可用的$first变量来完成此操作。像这样

<div ng-repeat="item in thisConsole.items" button-repeat>
                <li>
                    <a class="itembutton" href="#" ng-class={'selectedbutton':$first}><span ng-bind="item"></span></a>
                </li>
                <li class="divider"></li>
            </div>
相关文章：