Question

我把这个简单的代码写成了角色作为一个学习练习，但我不明白为什么我在浏览器中得到了错误的结果。

我在浏览器中看到的结果是文本＆＃34; {{helloMessage}}＆＃34; 而不是＆＃34; Hello World＆＃34;

代码：

<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>

<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>

<script src="angular.js"></script>
<script type="text/javascript">
    function HelloWorldCtrl($scope){
        $scope.helloMessage = "Hello World";
    }
</script>

</body>
</html>

这是输出，我在浏览器中看不到任何错误：

Answer 1

这是你的代码正常工作!!!!!!

  function HelloWorldCtrl($scope){
        $scope.helloMessage = "Hello World";
    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app>
   <h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
</div>

Answer 2

<!DOCTYPE html>

// call your myApp
<html lang="en" ng-app="myApp">

<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>

<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
<script src="angular.js"></script>

// create your angular app
var app = angular.module("myApp",[]);

// create ng-controller inside your angular myApp
app.controller('MainCtrl', function($scope) {
    $scope.helloMessage = "Hello World";
}

检查此工作plunkr

Answer 3

由于某些原因，您的代码无效。

您没有创建Angular应用程序的实例。控制器必须作为现有角度应用程序的属性存在。它可以像这样创建。 angular.module('app',[]) 现在控制器可以像这样附加到它：
```
angular.module('app', [])
   .controller('HelloWorldCtrl',HelloWorldCtrl);

function HelloWorldCtrl($scope){
   $scope.helloMessage = "Hello World";
}
```

您没有正确使用Angular依赖注入。您可以确保在运行时使用$scope属性注入$inject参数，如下所示：

 angular.module('app', [])
  .controller('HelloWorldCtrl',HelloWorldCtrl);

 HelloWorldCtrl.$inject = ['$scope'];

 function HelloWorldCtrl($scope){
    $scope.helloMessage = "Hello World";
 }

通过这些更改，代码可以正常运行。见working CodePen

Answer 4

你的代码很好。只需在ng-controller之前注入src即<script src="angular.js"></script>。确保您的angular.js文件位于根目录中您的代码 plunker ：http://plnkr.co/edit/Nhmg9FYJlHy9IwVsIJ0x?p=preview

<script src="angular.js"></script>
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
<script type="text/javascript">
    function HelloWorldCtrl($scope){
        $scope.helloMessage = "Hello World";
    }
</script>

更新：我认为你的src到angular.js不在根。尝试删除<script src="angular.js"></script>和添加
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>代替它。

Answer 5

当你想渲染一个angularJs应用程序变量在HTML中，它必须在角度上下文中定义。因为这个函数没有在角度上下文中定义，而只是作为一个javascript函数定义，所以它不起作用。

function HelloWorldCtrl（$ scope）{$ scope.helloMessage =＆＃34; Hello World＆＃34 ;; }

为什么我的角度代码不起作用？

5 个答案: