Angular变量未在HTML中显示

Question

我试图刷新对Angular的了解，并且似乎无法理解一些概念，例如，“ controller as”模式似乎不起作用，即使它看起来比$scope更简单。 $scope 。

我无法在HTML中显示一个简单的变量。

这是有问题的两段代码：

app.js

angular
    .module('routerApp', [''])
    .controller('mainController', function () {
        'use strict';
        var vm = this;
        vm.bigMessage = 'A smooth sea never made a skilled sailor';
    })

index.html （大幅缩减）

<!DOCTYPE html>
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body class="container" ng-app="routerApp" ng-controller="mainController as main">
        <h1>{{ main.bigMesssage }}</h1>
    </body>
</html>

有趣的是，浏览器甚至不呈现"{{ main.bigMessage }}" ，而是不显示任何内容。 但是，在源代码中有{{ ... }}部分。

Answer 1

您已经在依赖数组括号中添加了'' ，这是错误的Angular会搜索名称为''依赖关系＆显然不会找到具有该名称的依赖项，并且为什么angular在控制台中抛出$injector错误。 ，因为您没有任何依赖关系，所以应该为[]

码

angular
.module('routerApp', []) //<--change here
.controller('mainController', function () {
    'use strict';
    var vm = this;
    vm.bigMessage = 'A smooth sea never made a skilled sailor';
})

另外，您在{{main.bigMesssage}}有错别字，这里bigMesssage应该是bigMessage然后它将变成

{{main.bigMesssage}}

Demo Plunkr

Answer 2

你写的一切都正确，除了你的bigmessage变量法术

 <body class="container" ng-app="routerApp" ng-controller="mainController as main">
        <h1>{{ main.bigMessage }}</h1>
    </body>

调节器

angular
    .module('routerApp', [])
    .controller('mainController', function () {
        var vm = this;
        this.bigMessage = 'A smooth sea never made a skilled sailor';
    })

检查这个小提琴： https ： //jsfiddle.net/bjwov6f1/1/

没有找到您的变量，为什么它没有显示任何内容

要了解更多信息，请通过以下链接进行访问： https : //thinkster.io/egghead/experimental-controller-as-syntax

Angular变量未在HTML中显示

问题描述

2 个解决方案

解决方案1
3 已采纳 2015-06-21 09:06:50

解决方案2
1 2015-06-21 09:22:24

Angular变量未在HTML中显示

问题描述

2 个解决方案

解决方案1 3 已采纳 2015-06-21 09:06:50

解决方案2 1 2015-06-21 09:22:24

解决方案1
3 已采纳 2015-06-21 09:06:50

解决方案2
1 2015-06-21 09:22:24