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

【问题标题】：AngularJS 1.6.8: Unable to pass data from controller to viewAngularJS 1.6.8：无法将数据从控制器传递到视图
【发布时间】：2018-01-30 08:51:11
【问题描述】：

不知道哪里出错了。

以下是所有相应文件的代码。它是一个非常基本的带有路由的 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!';
  };

【问题讨论】：

认为有错误 var vm = this;应该读 var ctrl = this;并替换 vm 的实例

标签： javascript angularjs angularjs-1.6

【解决方案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 ...';

与

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

【讨论】：

感谢您的回复。我试过了。没用。
您需要取消注释 controllerAs: 'vm' 第一个选项，但将其删除为第二个。你试过了吗？
woo... 所以，我尝试了第二个选项。我没有通过删除第二个选项的`controllerAs：'vm'`来工作。但是，它确实通过删除bindings:{information:'='} .. 不知道为什么
设置绑定时，如果组件的元素类型，它期望数据作为属性传递。但是，您似乎是直接在路线上设置组件。它必须以某种方式使其超出范围。以前没有真正使用过这种方法。我会更新答案以包含您的发现。
有一个错字。这是ng-controller，而不是ngController。