AngularJS 1.X建议箱应用无法显示建议问题求助

我正在用JavaScript和AngularJS 1.X开发一个建议箱应用，功能上支持用户发布建议、给建议点赞，但现在遇到个麻烦——页面上完全显示不出建议内容。麻烦帮我看看哪里出问题了，下面是我的代码片段：

index.html代码 #

<!DOCTYPE html> 
<html> 
<head> 
    <title>Suggestion Box</title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> 
    <script type="text/javascript" src="...">
    <!-- 这里是我的应用脚本文件引用 -->
</head>
<body>
    <!-- 页面结构内容 -->
</body>
</html>

排查&解决方案 #

我帮你梳理几个最可能导致建议无法显示的原因，你可以逐一检查：

1. 未正确声明AngularJS应用和控制器 #

AngularJS需要通过ng-app和ng-controller指令把视图和后端逻辑绑定起来，要是没加这两个指令，数据根本没法渲染到页面上。

• 先在<body>标签里添加指令：

  <body ng-app="suggestionBoxApp" ng-controller="SuggestionController">
  

• 然后在你的应用JS文件里定义对应的模块和控制器：

  // 定义应用模块
  var app = angular.module('suggestionBoxApp', []);
  // 定义控制器
  app.controller('SuggestionController', function($scope) {
      // 初始化建议数组，先放个测试数据验证
      $scope.suggestions = [
          { id: 1, text: "这是一条测试建议", likes: 0 }
      ];
  });
  

2. 视图未用ng-repeat遍历建议数据 #

就算你已经在$scope里存了建议数组，视图也得用ng-repeat来遍历展示每一条建议。比如在页面里加这段代码：

<div class="suggestion-item" ng-repeat="suggestion in suggestions">
    <p>{{suggestion.text}}</p>
    <button ng-click="likeSuggestion(suggestion)">点赞 ({{suggestion.likes}})</button>
</div>

这里的{{suggestion.text}}和{{suggestion.likes}}是AngularJS的表达式，用来绑定对应的数据。

3. 应用脚本文件路径错误 #

检查你引用的JS文件（比如app.js）的src路径是不是正确的，要是路径写错了，浏览器加载不到控制器代码，数据自然没法渲染。

4. 发布建议的函数未正确更新$scope数组 #

如果用户发布建议的逻辑有问题，新建议没加到$scope.suggestions里，页面也会显示为空。比如发布函数应该这样写：

$scope.addSuggestion = function(newText) {
    // 先判断输入内容不为空
    if(newText.trim()) {
        $scope.suggestions.push({
            id: $scope.suggestions.length + 1,
            text: newText.trim(),
            likes: 0
        });
        // 清空输入框
        $scope.newSuggestion = "";
    }
};

对应的发布表单可以这样写：

<input type="text" ng-model="newSuggestion" placeholder="写下你的建议">
<button ng-click="addSuggestion(newSuggestion)">发布建议</button>

内容的提问来源于stack exchange，提问作者ReaderGirl13