javascript - What is the preferred AngularJS way of adding CSS styling after Controller asynchronous call? -
i building application nw.js , angularjs github link
my application retrieves file names local folders , displays these filenames in application list. want first item in list different rest because starts "selected" button/item. file data asynchronous.
currently, have file data loaded service pulls file names inside of controller. because file data uses asynchronous function, have placed within async.series call within controller. after async call finishes, ng-bind takes effect , list displayed in app.
i have tried adding different directives add selected class first item called before list shown on screen.
can me understand preferred angularjs way of setting classes or css properties of element after has been binded data?
below relevant code. full project follow github link above.
controller
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 = 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"); }); }); relevant 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> directives
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'); }); }; });
use $first variable available inside ng-repeat ng-class this. this
<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>
Comments
Post a Comment