时间戳

首页 > 解决方案 > 在 angularjs 中试图循环工厂数据以创建配置也 ng-view 不显示 html？

javascript - 在 angularjs 中试图循环工厂数据以创建配置也 ng-view 不显示 html？

问题描述

我正在尝试将我的路线放入工厂，然后使用这些数据循环创建配置路线，但它不起作用。

另一个问题是，即使我只是输入一些路由，ng-view 也不会显示 html 文件中的内容？

代码如下，虽然我没有包含 View1.html 和 View2.html 但它们可以包含任何用于测试的内容。

我非常感谢任何建议:)

谢谢

多姆

主要的html：

<!DOCTYPE html>
<html>
    <head>
    <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="app.css">
    </head>
    <body ng-app="templateApp" layout="column"
    ng-controller="controller">  
    <md-toolbar layout="row">
        <md-button class="menu" ng-click="toggleList()">
            <i class="material-icons vertical-align-middle">menu</i>
        </md-button>
        <h3>test template</h3>
        <md-button ng-click="toggleRight()">
            Filters        
        </md-button>        
    </md-toolbar>  
    <div class="container" layout="row" flex>
        <md-sidenav md-is-locked-open="$mdMedia('gt-sm')" class="md-whiteframe-4dp" md-component-id="left">
            <md-list>
                <md-list-item ng-repeat="p in pages">
                    <md-button ng-click="selectPage(p)">
                        <i class="material-icons vertical-align-middle">{{p.icon}}</i>
                        {{p.name}}
                    </md-button>
                </md-list-item>
            </md-list>
        </md-sidenav>

        <md-content id="content" flex>
            <div><a href ="#partial1">Partial 1</a> </div>
            <div ng-view></div>     
        </md-content>

   <md-sidenav class="md-sidenav-right md-whiteframe-4dp" md-component-id="right">
        <md-button ng-click="close()" class="button">
          Close Filters
        </md-button>
    </md-sidenav>

    </div>

    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.min.js"></script>
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-aria.min.js"></script>
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-messages.min.js"></script>
    <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
    <script src = "pages.js"></script>

    </body>
</html>

page.js：

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

templateApp.factory('pageFactory', function () {

    var pages = [
                {icon: 'assessment', name: 'Overview', route: '/partial1', template: 'View1.html'},
                {icon: 'assignment', name: 'Dashboard', route: '/partial2', template: 'View2.html'}
        ];

    var factory = {};
    factory.getPages = function(){
        return pages;
    }

    return factory;
});

templateApp.controller('controller', function($scope, $mdSidenav, pageFactory, $location) {

        $scope.toggleList = function () {
            $mdSidenav('left').toggle();
        };

        $scope.toggleRight = function () {
            $mdSidenav('right').toggle();
        };

        $scope.close = function () {
            $mdSidenav('right').close();
        };


        $scope.selectPage = function (page) {
            $location.path(page.route);
        };

        $scope.pages = pageFactory.getPages();

    });

templateApp.config(function($routeProvider, pageFactory) {

angular.forEach(pageFactory.getPages(), function(r) {
    $routeProvider.when(r.route, {controller: 'controller', template: r.template});
});

});

//templateApp.config(function($routeProvider) {
//    $routeProvider
//    .when("/partial1", {
//        templateUrl : "View1.html"
//    })
//    .when("/partial2", {
//        templateUrl : "View2.html"
//    });
//});

应用程序.css：

html, body {
    font-family= 'roboto', sans-serif;
    font-size:14px;
    height:100%;
    margin:0px;
    padding:0px;
}

.vertical-align-middle { 
    vertical-align: middle; 
}

md-toolbar h3 {
    margin: auto;
    font-weight:500;
}

md-list-item > button {
    width:100%;
    text-align:left !important;
}

#content {
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 5px;
}

.button {
  position: absolute;
  left: 20px;
  margin: 0;
}

标签： javascriptangularjsng-view

解决方案

推荐阅读