AngularJS:主页中未显示浏览页面内容

gojuced7  于 2023-03-17  发布在  Angular
关注(0)|答案(1)|浏览(153)

我是一个新手Angular 和工作的一个项目,但我有一个问题,显示信息在两个不同的页面。
我有一个“浏览”页面来显示个人资料,我还有一个主页来显示浏览页面的内容和其他杂项信息,为此我创建了一个组件(browsePage),然后将该组件添加到home.view.html中。

<browse-page></browse-page>

但资料没有显示。

在我的浏览页面的个人资料显示。

我的代码:
app.config.js

$routeProvider
        .when('/home', {
            RouteData: {
                bodyStyle: {
                    //'background': 'url(../images/bg-7.jpg)repeat'
                    'background-color': 'white'
                }
            },
            controller: 'HomeController',
            templateUrl: 'home/home.view.html',
            controllerAs: 'vm'
        })
        .when('/browse', {
            RouteData: {
                bodyStyle: {
                    //'background': 'url(../images/bg-10.jpg)repeat'
                    'background-color': 'white'
                }
            },
            controller: 'BrowseController',
            templateUrl: 'browse/browse.view.html',
            controllerAs: 'vm'
        })

home.controller.js

angular.module("mango").controller("HomeController", HomeController);

function HomeController() {
    
}


angular.module('mango').controller('ExampleController', ['$cookies', function($cookies) {

 }]);

home.view.html

This is the home page<br>
Miscellaneous info goes here

<browse-page></browse-page>

Miscellaneous info goes here<br>
end of home page

browse.component.js

console.log("In browse.component.js");
angular.module("mango").component("browsePage",{
      templateUrl:"browse/browse.view.html",
      controller:BrowseController
});

browse.controller.js

angular.module("mango").controller("BrowseController", BrowseController);
BrowseController.$inject = ["$rootScope","$location","AuthenticationService","$http"];

function BrowseController($rootScope, $location, AuthenticationService, $http){
    var vm = this;
    $http.get('browse_profiles.json').success(function(data){
       vm.data = data;
       console.log("data==>");
       console.log(data);
    });
}

browse.view.html

<br><br>
<!-- Page Content -->
<div class="container">

    <!-- Jumbotron Header -->
    <header class="jumbotron hero-spacer" >
    
        <form ng-submit="submit()" ng-controller="ExampleController">
            Enter text and hit enter:
            <input type="text" ng-model="text" name="text" />
            <input type="submit" id="submit" value="Submit" />

            </form>
        
    </header>

    <hr>

    <!-- Page Features -->
    <div class="row text-center">

    <img id="mySpinner" src="/images/loader.gif" ng-show="loading" />
        {{alpine}}
        <div class="col-md-3 col-sm-6 hero-feature" ng-repeat="profile in vm.data">
        
            <div class="thumbnail">
                <img src="{{profile.thumbnail}}" alt="">
                <div class="caption">
                
                    <div class="username-status">
                    <span class="username pull-left"><a ng-href="#/profile/{{profile.username}}">{{profile.username}}</a></span>
                    <p ng-class-odd="'circle odd'" ng-class-even="'circle even'"></p>
                    </div>
                </div>
                
            </div>
        </div>
        

    </div>
    <!-- /.row -->

    <hr>

    <!-- Footer -->
    <footer>
        <div class="row">
            <div class="col-lg-12">
                <p>Copyright &copy; Your Website 2014</p>
            </div>
        </div>
    </footer>

</div>

End of browse view.
<br><br>

index.html

<!doctype html>
<html lang="en" ng-app="mango">
<head>
<meta charset="utf-8">
<title>Mango</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>

<script src="app.config.js"></script>
<script src="login/route-data.js"></script>
<script src="navigation_menu/navigation_menu.config.js"></script>

<script src="browse/browse.controller.js"></script>
<script src="browse/browse.component.js"></script>

<script src="home/home.controller.js"></script>
<script src="profile/profile.controller.js"></script>
<script src="settings/settings.controller.js"></script>

<script src="login/login.controller.js"></script>
<script src="login/app-services/authentication.service.js"></script>
<script src="login/app-services/flash.service.js"></script>
<script src="login/app-services/user.service.local-storage.js"></script>

</head>
<body ng-style="RouteData.get('bodyStyle')" ng-cloak>
<navigationmenu ng-if="location.path() !== '/login'"></navigationmenu>
<ng-view autoscroll></ng-view>

</body>
</html>

我在控制台中没有收到任何错误。您可以忽略GET错误。

我需要做些什么来解决我的问题?

zf2sa74q

zf2sa74q1#

我认为在您的组件中,您没有指定controllerAs,当您后藤**/browse时,您的browseView.html将获得控制器示例vm**,但是当通过component加载browseView.html时,它不会获得控制器示例,因为它不会像在routeProvider中那样进行示例化。
试着做,

angular.module("mango").component("browsePage",{
  templateUrl:"browse/browse.view.html",
  controller:BrowseController,
  controllerAs: 'vm'
});

霍普这就解决了问题。

相关问题