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>

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

我需要做些什么来解决我的问题？我开始思考了谢谢你提前。

Answer 1

我认为在您的组件中，您没有指定controllerAs，当您转到 / browse 时， browseView.html 会将控制器实例作为 vm ，但是当 browseView.html 通过组件加载时，它没有获取控制器实例，因为它没有像实现那样实例化，在<强> routeProvider

尝试做，

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

希望，这解决了这个问题。

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

1 个答案: