Question

控制台显示没有错误但页面什么都没显示。这是我的代码。

代码基本上包含角度模块和控制器。我已经尝试运行代码而不包含angular.js脚本文件，页面显示是预期的，因为它只输出Html组件。但是，在包含Angular JS组件之后，页面会产生干净的结果。

{{1}}

Answer 1

您需要在ng-controller之后的div上添加body

<body>
 <div ng-controller="myctrl as myctrl">
  <REST OF YOUR HTML>
 </div>
</body>

Answer 2

您已将您的javascript代码放在您的html代码中，这在技术上很好。您还在javascript代码中创建了控制器，这很好。

app.controller('myctrl',function(){......

但是，你需要在你的函数中创建一个专门用于'myctrl'控制器的函数。

所以在你的html代码中，你必须以下列方式包含这个angularjs指令

<div ng-controller="myctrl"> <h1> {{myvariable}} </h1> </div>

你的html中的这行代码会将你的控制器连接到html视图。在这个具体案例中

{{myvariable}}

是可以在控制器中定义的变量。例如，您可以在控制器中说出

$scope.myvariable="Hello World";

然后，当您在浏览器中运行整个代码时，您将看到h1标题显示hello world。

所以底线是你必须在你的javascript文件中定义一个控制器（你已经做过）。您还必须在html中定义具有 ng-controller =“myctrl”指令的。

希望能解决您的问题。！干杯：）

Answer 3

进行以下更改：

这是作品。

Answer 4

首先，您需要使用ng-controller属性为模板分配控制器。此外，您将$ scope作为参数传递给控制器，以便$ scope上定义的任何内容都可以作为$ scope变量直接访问。

app.controller('myctrl',function($scope){
    $scope.example = [];
});

另外，我建议您在声明依赖项时使用模块数组语法。

app.controller('myctrl',['$scope', function($scope){
    $scope.example = [];
}]);

您可以直接从已将myctrl定义为控制器的模板中访问变量示例。我做了以下更改以使您的代码有效 -

的javascript

var app = angular.module('myApp',[]);
   app.controller('myctrl',function($scope){
       $scope.dishes=[];
});

HTML

<div class="container" ng-controller="myctrl">
    <li class="media" ng-repeat="dish in dishes">
    </li>
</div>

希望它有所帮助。