角度不渲染$ scope

我嘗試顯示我的控制器的一些變量，但輸出只是{{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'; 
    }]); 
})();

來源

2015-11-07 Michael Pittino

我看不到'ng-app'。你在哪裏定義應用程序？ – Dvir

是的，它在html標記中：'' –

對不起。錯過了。您是否在控制檯上看到任何錯誤？ – Dvir

改變這一行：

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

要：

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

編輯：如果你使用controllerAs那麼我認爲你應該重寫代碼：

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

來源

2015-11-07 19:42:43

當我這樣做時，我沒有得到任何輸出。 –

哦，我只是注意到，如果我改變它這個工程：'

'有人可以解釋我爲什麼嗎？ –

@MichaelPittino - 我已經更新了我的答案，請檢查它是否有幫助 –

當你使用ControllerAs語法在HTML中，最終綁定到控制器實例的值實際上在您的this對象上。

這是什麼意思是你的代碼user附加到scope對象是不正確的;相反，您應該執行以下操作：

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

來源

2015-11-07 20:02:06 wmock

角度不渲染$ scope

回答

相關問題