Question

我正在使用NW.js和AngularJS GitHub Link

构建应用程序

我的应用程序从本地文件夹中检索文件名，并将这些文件名作为列表显示在应用程序中。我希望列表中的第一个项目看起来与其他项目不同，因为它以＆＃34; selected＆＃34;键/项目。文件数据是异步的。

目前，我将文件数据作为服务加载，它将控制器内的文件名拉出来。因为文件数据使用异步函数，所以我将它放在控制器内的async.series调用中。此异步调用完成后，ng-bind生效，列表显示在我的应用程序中。

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

有人可以帮助我理解在将元素绑定到数据后设置类或css属性的首选angularjs方法是什么？

以下是相关代码。对于完整项目，请按照上面的GitHub链接。

控制器

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

Answer 1

使用$first内可用的ng-repeat变量和ng-class来执行此操作。像这样的东西

<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>

在Controller异步调用之后添加CSS样式的首选AngularJS方法是什么？

控制器

相关HTML

指令

1 个答案: