代码之家 › 专栏 › 技术社区 › Nauman Tanwir

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

angularjs-1.6 angularjs javascript

Nauman Tanwir · 技术社区 · 6 年前

我不知道我错在哪里。

下面是所有相应文件的代码。这是一个非常基本的水疗中心,有路线。

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!';
  };

1 回复 | 直到 6 年前

Richie Mackay 6 年前

您可以使用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 ...';

以及

如果您没有将组件用作元素并传入“信息”,请删除绑定选项。