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

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

javascript angularjs

Javascript AngularJS 1.6.8:无法将数据从控制器传递到视图,javascript,angularjs,angularjs-1.6,Javascript,Angularjs,Angularjs 1.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

我不知道我会错在哪里

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

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>

<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.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>

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

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

及

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

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

及

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

认为var vm=this有错误；应读取var ctrl=this；并替换vm的实例，认为存在错误var vm=this；应读取var ctrl=this；并替换VMS的实例感谢您的响应。我试过了。不起作用。第一个选项需要取消对controllerAs:“vm”的注释，但第二个选项需要删除它。你试过了吗？哇。。。所以，我尝试了第二种选择。对于第二个选项，我并没有删除'controllerAs:'vm''。但是，它确实通过删除

绑定：{information:'='}

起作用。。不知道为什么在设置绑定时，如果元素类型为组件，它希望数据作为属性传递。但是，您似乎是直接在管线上设置组件。它必须以某种方式将其排除在范围之外。我以前没用过那种方法。我会更新答案以包含你的发现。有一个输入错误。这是

ngController

，不是

ngController

。感谢您的回复。我试过了。不起作用。第一个选项需要取消对controllerAs:“vm”的注释，但第二个选项需要删除它。你试过了吗？哇。。。所以，我尝试了第二种选择。对于第二个选项，我并没有删除'controllerAs:'vm''。但是，它确实通过删除

绑定：{information:'='}

起作用。。不知道为什么在设置绑定时，如果元素类型为组件，它希望数据作为属性传递。但是，您似乎是直接在管线上设置组件。它必须以某种方式将其排除在范围之外。我以前没用过那种方法。我会更新答案以包含你的发现。有一个输入错误。它是

ng控制器

，而不是

ng控制器

。