控制器,范围变量不起作用

时间:2015-03-19 08:48:49

标签: javascript angularjs

From Documentation

  

语法InvoiceController as invoice告诉Angular实例化   控制器并将其保存在当前的变量发票中   范围。

     

我们还更改了页面中的所有表达式以进行读写   该控制器实例中的变量通过为它们添加前缀   invoice

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js" data-require="angular.js@1.3.x"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="InvoiceController as invoice">
    <p>Hello {{invoice.name}}!</p>
  </body>

</html>

JS

var app = angular.module('plunker', []);

app.controller('InvoiceController', function() {
  this.name = 'World';
});

但它没有像文件中提到的那样工作。我只是将内联脚本移动到外部文件。

PLUNKER DEMO

另外,如果我将$scope传递给控制器​​函数

,它也无法正常工作
app.controller('InvoiceController', function($scope) {
  $scope.name = 'World';
});

1 个答案:

答案 0 :(得分:3)

您忘了设置ng-app

<html ng-app="plunker">
<!-- REST OF HTML -->
</html>