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

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>

或

将其分配给组件中的 ctrl。

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

和

删除绑定选项，因为您没有将组件用作元素并传入 'information'。

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

AngularJS 1.6.8: Unable to pass data from controller to view

javascript

angularjs

angularjs-1.6