Question

我尝试显示控制器的某个变量，但输出只是{{UserCtrl.user}}而不是UserCtrl.user的内容。

我有以下文件结构：

index.html
scripts/app.js

这是index.html的代码：

<!doctype html>
<html lang="en" ng-app="birdsnest">
<head>
    <meta charset="utf-8">

    <title>Birdsnest</title>

    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.css">
</head>
<body>
    <div ng-controller="UserController as UserCtrl">
        {{UserCtrl.user}}
    </div>

    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="bower_components/angular/angular.js"></script>

    <script src="scripts/app.js"></script>
</body>
</html>

scripts/app.js：

(function() {
  var app = angular.module('birdsnest', []);

  app.controller('UserController', ['scope', function($scope) {
    $scope.user = 'Michael';
  }]);
})();

Answer 1

更改此行：

app.controller('UserController', ['scope', function($scope) {

要：

 app.controller('UserController', ['$scope', function($scope) {

编辑：如果您使用的是controllerAs，那么我认为您应该重写代码：

app.controller('UserController', function() {
  this.user = 'Michael';
});

Answer 2

当您在HTML中使用ControllerAs语法时，最终绑定到控制器实例的值实际上在您的this对象上。

这意味着将user附加到scope对象的代码不正确;相反，你应该做以下事情：

app.controller("UserController", function() {
  this.user = "Michael";
});

angular不会渲染$ scope

2 个答案: