AngularJS: 浏览页面内容未在首页显示

Question

我是 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>

我没有收到任何错误 console.You 可以忽略 GET 错误。

我需要做什么来解决我的问题？我开始想提前致谢。

Answer 1

我认为在您的组件中，您没有指定控制器，因为当您转到 /浏览 时，您的 browseView.html正在获取控制器实例作为 vm，但是当 browseView.html 通过 component 加载时，它没有获取控制器实例，因为它没有像在 routeProvider.

中那样被实例化

试试看，

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

希望这能解决问题。

AngularJS: 浏览页面内容未在首页显示

AngularJS: Browse page content not being displayed in Homepage

javascript

angularjs

angular-controller

angular-component-router