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"
    }
  ]
}

从这里开始创建控制器和templateUrl的作业，其页面名称为angularjs，如 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';
});

我希望有人可以帮忙!!!

Answer 1

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

ng-class="{ myClass: ExpressionThatResolvesTrueOrFalse }"

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

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

ng-class="pageClass"

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

1 个答案: