Question

不确定我哪里出错了。

以下是所有相应文件的代码。它是一个非常基本的SPA与路由。

index.html

    <!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Bookstore</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">

    <script src="angular.js"></script>
    <script src="angular-route.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script>
</head>
<body ng-controller="mainCtrl as vm">

    <nav class="navbar navbar-light bg-light">
        <div class="container-fluid">
            <div class="navbar-header">

                <a class="navbar-brand" ui-sref="home">Bookstore</a>
            </div>

        </div> 
    </nav> 
    <div class="container">
        <div class="row">
            <div class="col-md-2">
                <ul class="menu">
                    <li class="nav-item"><a class="nav-link active" ui-sref="dashboard">Dashboard</a></li>
                    <li class="nav-item"><a class="nav-link" ui-sref="contact">Contact Us</a></li>
                    <li class="nav-item"><a class="nav-link" ui-sref="about">About Us</a></li>
                </ul>
            </div>
            <div class="col-md-10">
               <ui-view>

               </ui-view>
            </div>
        </div>
    </div>  

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    <script src="app.js"></script>
    <script src="about/about.component.js"></script>
    <script src="contact/contact.component.js"></script>
    <script src="dashboard/dashboard.component.js"></script>
</body>
</html>

app.js

var app = angular.module('myApp', ['ui.router']);
app.controller('mainCtrl',function(){

});

app.config(['$stateProvider', '$urlRouterProvider',function($stateProvider,$urlRouterProvider){
    $urlRouterProvider.otherwise('/');

    $stateProvider
      .state('home', {
        url: '/',
        templateUrl: 'home.html'
      })
      .state('dashboard', {
        url: '/dashboard',
        templateUrl: 'dashboard/dashboard.html'
      })
      .state('contact', {
        url: '/contact',
        templateUrl: 'contact/contact.html'
      })
      .state('about', {
        url: '/about',
       // templateUrl: 'about/about.html',
        component: 'aboutComponent'
      })
}]);

about.html

<div ngController="aboutController">
    <div class="heading text-center">
        <h1>About Us</h1>
    </div>
    <div class="text text-center">
        <p>{{$ctrl.information}}</p>
    </div>
</div>

about.component.js

    angular.module('myApp')
    .component('aboutComponent', {
    restrict: 'E',
    scope: {},    
    templateUrl:'about/about.html',
    controller: aboutController,
    // controllerAs: 'vm',
    bindings:{
      information:'='
    }

  });

  function aboutController() {
    var vm = this;
    vm.information = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita fuga quas eaque ipsa praesentium asperiores! Saepe neque nemo consequuntur enim sunt est quos eaque alias quis fugit nihil, provident iusto!Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita fuga quas eaque ipsa praesentium asperiores! Saepe neque nemo consequuntur enim sunt est quos eaque alias quis fugit nihil, provident iusto!Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita fuga quas eaque ipsa praesentium asperiores! Saepe neque nemo consequuntur enim sunt est quos eaque [![enter image description here][1]][1]alias quis fugit nihil, provident iusto!Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita fuga quas eaque ipsa praesentium asperiores! Saepe neque nemo consequuntur enim sunt est quos eaque alias quis fugit nihil, provident iusto!';
  };

Answer 1

您可以使用controllerAs：'vm'选项，然后在模板中使用

<div ng-controller="aboutController">
    <div class="heading text-center">
        <h1>About Us</h1>
    </div>
    <div class="text text-center">
        <p>{{vm.information}}</p>
    </div>
</div>

OR

将其分配给组件中的ctrl。

var ctrl = this;
ctrl.information = 'Lorem ipsum ...';

和

删除绑定选项，前提是您没有将组件用作元素并传递“信息”。

AngularJS 1.6.8：无法将数据从控制器传递到视图

1 个答案: