具有 ng-class 的动态路由和控制器答案

【问题标题】：Dynamic route and controller with ng-class具有 ng-class 的动态路由和控制器
【发布时间】：2016-01-19 22:45:14
【问题描述】：

我正在尝试使用 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"
    }
  ]
}

从这里开始，我们的工作是使用 angularjs 中的页面名称为下摆创建控制器和 templateUrl，例如 hours.js

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

希望真的有人可以帮忙！！！

【问题讨论】：

标签： javascript angularjs json templates dynamic

【解决方案1】：

这就是我习惯使用ng-class 的方式。它似乎有多种格式。这种风格需要单个花括号。

ng-class="{ myClass: ExpressionThatResolvesTrueOrFalse }"

因此，如果表达式解析为 true，那么 Angular 会将 myClass 添加到元素中。如果解析为 false，则不会添加该类。它将观察表达式的值作为正常范围摘要的一部分进行更改。

我相信模型格式根本不使用大括号，更像是：

ng-class="pageClass"

【讨论】：

Angular 的 ng-class 文档。此外，他可以使用ng-class="pageClass" - 添加它可能会有所帮助:)
感谢@Sean3z，在您发布时正在编辑，您完全正确。事实上，我已经有一段时间没有亲自查看文档了。