動態路由和控制器納克級

Question

我嘗試使用angularjs 這裏創建動態的框架是我的計劃......用戶必須添加從JSON文件中的新templateUrl和控制器這樣templates.json

{ 
    "pages" : [ 
    { 
    "name"  : "home", 
    "tempUrls" : "views/home", 
    "controller" : "HomeController" 
    }, 
    { 
     "name"  : "about", 
     "tempUrls" : "views/about", 
     "controller" : "AboutController" 
    }, 
    { 
     "name"  : "contact", 
     "tempUrls" : "views/contact", 
     "controller" : "ContactController" 
    } 
    ] 
} 

從這裏我們的工作就是創造下襬像這樣hours.js在angularjs控制器和templateUrl使用頁名稱

var hours = angular.module('hours', ['ngRoute']); 

var $routeProviderReference; 
var currentRoute; 
hours.config(function($routeProvider){ 
    $routeProviderReference = $routeProvider; 
}) 
.run(['$route', '$http', '$rootScope', function($route, $http, $rootScope){ 
    $http.get("templates.json").success(function(data){ 
     var loop = 0, currentRoute; 
     for(loop = 0; loop < data.pages.length; loop++){ 
      currentRoute = data.pages[loop]; 
      var routeName = "/" + currentRoute.name; 
      $routeProviderReference.when(routeName, { 
       templateUrl: currentRoute.tempUrls, 
       controller : currentRoute.controller, 
       resolve: { 
        param: function() 
        { 
         return currentRoute.resolve; 
        } 
       } 
      }); 
     } 
     $route.reload(); 
    }); 
}]); 

hours.controller(currentRoute.controller, function($scope){ 
    $scope.pageClass = 'page-' + currentRoute.name; 
}); 

這裏是的index.html

<div ng-class="{{pageClass}}" ng-view></div> 

，這裏是從angularJS靜態版本之前，我轉換爲動態

var hours = angular.module('hours', ['ngRoute']); 

hours.config(function($routeProvider){ 
    $routeProvider 
     .when('/', { 
      templateUrl: 'views/page-home.html', 
      controller: 'homeController' 
     }) 
}); 

hours.controller('homeController', function($scope){ 
    $scope.pageClass = 'page-home'; 
}); 

我真的希望有人能夠幫助！

Answer 1

這就是我習慣使用ng-class的方式。它似乎有多種格式。這種風格需要單個花括號。

ng-class="{ myClass: ExpressionThatResolvesTrueOrFalse }" 

因此，如果表達式解析屬實，那麼角將增加myClass的的元素。如果它解決錯誤，它將不會添加該類。它將觀察作爲正常範圍摘要一部分的變化表達式的值。

我相信模型格式完全不使用大括號，更喜歡：

ng-class="pageClass"