Question

我正在学习角度..我试图运行一个小例子，但无法呈现正确的输出。可以有人帮忙吗？

的index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>AngularJS Tutorial</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
</head>
        <body ng-app='app' ng-controller='MainController as main'>
    <div class='container'>
        <h1>{{ title }}</h1>
        <div ng-controller='SubController as sub'>
            <h2>{{sub.title}}</h2>
            <p>If we were not using the <strong>ControllerAs</strong> syntax we would have a problem using title twice!</p>
        </div>
    </div>
</body>
</body>
</html>

app.js

angular.module('app', []);

angular.module('app').controller("MainController", function($scope){
    $scope.title = 'AngularJS Nested Controller Example';
});

angular.module('app').controller("SubController", function(){
    this.title = 'Sub-heading';
});

我无法弄清楚为什么角度变量会显示为普通文本而不是其指定值。请帮助...

Answer 1

请plunkr 它的工作原理

 <h1>{{main.title }}</h1>
    <div ng-controller='SubController as sub'>
        <h2>{{sub.title}}</h2>
        <p>If we were not using the <strong>ControllerAs</strong> syntax we would have a problem using title twice!</p>
    </div>

Answer 2

您似乎缺少指向app.js文件的链接。

在引用.js文件时只是一个提示，请确保引用任何使用Angular的javascript，引用angular.js后面的行

所以你的引用应该是这样的：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="app.js"></script> <!-- this is the one you are missing -->

变量值未在控制器angularjs的视图中呈现

2 个答案: