Question

我正在尝试刷新我对Angular的了解，而我似乎无法理解一些概念，“控制器为”模式似乎不起作用，例如，即使它似乎更多比$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将搜索名称为''＆amp;的依赖项。很明显，没有任何依赖性可以找到这个名称＆amp;为什么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}}然后它会变成

{{1}}

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

角度变量未在HTML中显示

2 个答案: