AngularJS ng-repeat 不呈现（Browserify 和 Watchify 在后台）

Question

我正在尝试建立一个包含模块、控制器和视图的基本 Angular 应用程序。我正在努力让 angular 解释“{{}}”中的内容。

我是运行 Browserify，它将所有内容推送到“./js/bundle.js”。

这是我的代码：

index.html

<!DOCTYPE html>
<html ng-app="showNames">
<head>
    <script src="./js/bundle.js"></script>
    <title> Help </title>
</head>

 <body>
    <h1>Show Those Names</h1>
      <ul ng-controller="namesController as namesCtrl">        
        <li ng-repeat="name in namesCtrl">{{name.names}}</li>  
      </ul>     
 </body>

</html>

app.js

"use strict";

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

app.controller('namesController', ['$scope', function($scope){
        $scope.names = ["jeff", "jim", "jay", "Please show up"];
 }]);

我的浏览器只呈现{{name.names}}。

知道这里发生了什么、我遗漏了什么或者我可以如何改进我的方法吗？

谢谢！

Answer 1

使用 ng-repeat 的方式错误。

<li ng-repeat="name in names">{{ name }}</li>

Answer 2

你的代码一团糟。

您的控制器在您的模板中被引用为 namesCtrl，但您将 names 分配给 $scope。选择一种方法并坚持下去
你重复了namesCtrl？
您的数组条目仅为字符串，没有 name 属性

使用$scope...

<ul ng-controller="namesController">        
    <li ng-repeat="name in names track by $index">{{name}}</li>  
</ul>

或使用"controller as"

app.controller('namesController', function() {
    this.names = ["jeff", "jim", "jay", "Please show up"];
});

和

<ul ng-controller="namesController as namesCtrl">        
    <li ng-repeat="name in namesCtrl.names track by $index">{{name}}</li>  
</ul>

Answer 3

更改了您的代码。有多个错误。试试这个

<!DOCTYPE html>
<html ng-app="showNames">
<head>
<script src="./js/bundle.js"></script>
<title> Help </title>
</head>

<body>
 <div ng-controller="namesController as namesCtrl">
  <h1>Show Those Names</h1>
    <ul>        
      <li ng-repeat="name in names">{{name}}</li>  
    </ul> 
 </div>    
</body>

</html>

你的 app.js 没问题。我希望它被推入 bundle.js

Answer 4

问题是在你的 ng-repeat 中你试图从控制器中获取名称，你应该使用你的模型，它是你控制器的一部分，即："name in names" 而不是 "name in namesCtrl"。

"use strict";

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

app.controller('namesController', ['$scope', function($scope){
        $scope.names = ["jeff", "jim", "jay", "Please show up"];
 }]);

<!DOCTYPE html>
<html ng-app="showNames">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <title> Help </title>
</head>

 <body>
    <h1>Show Those Names</h1>
      <ul ng-controller="namesController as namesCtrl">        
        <li ng-repeat="name in names">{{name}}</li>  
      </ul>     
 </body>

</html>

AngularJS ng-repeat 不呈现（Browserify 和 Watchify 在后台）

AngularJS ng-repeat doesn't render (Browserify and Watchify in background)

javascript

angularjs

angularjs-ng-repeat

browserify

watchify