AngularJS1文本框内容添加功能实现及代码报错求助

嘿，我帮你搞定这两个AngularJS的报错问题，先理清楚原因，再给你修正后的代码和详细说明：

错误原因拆解 #

• Expression 'addMessage()' is non-assignable：大概率是你错误地把触发函数的逻辑用在了ng-model指令上（ng-model是用来做双向数据绑定赋值的，不能绑定函数），应该用ng-click来触发点击事件。
• ReferenceError: message is not defined：你在视图里用到了message变量来绑定输入框，但没有在控制器的$scope中定义这个变量，AngularJS找不到它就会抛出这个错误。

修正后的完整代码 #

HTML部分 #

<!DOCTYPE html>
<html ng-app="messageApp">
<head>
    <title>消息添加示例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MessageController">
    <!-- 双向绑定输入框到$scope.message -->
    <input type="text" ng-model="message" placeholder="输入你的消息...">
    <!-- 用ng-click触发添加函数 -->
    <button ng-click="addMessage()">添加消息</button>
    
    <!-- 用ng-repeat遍历显示所有消息 -->
    <div class="message-list">
        <p ng-repeat="msg in messages track by $index">{{msg}}</p>
    </div>

    <script>
        // 定义AngularJS应用模块
        angular.module('messageApp', [])
        // 定义控制器
        .controller('MessageController', function($scope) {
            // 初始化存储消息的数组
            $scope.messages = [];
            // 初始化绑定输入框的变量，避免未定义错误
            $scope.message = '';

            // 定义添加消息的函数
            $scope.addMessage = function() {
                // 过滤空输入，避免添加空消息
                if ($scope.message.trim()) {
                    // 将当前输入的消息推入数组
                    $scope.messages.push($scope.message);
                    // 清空输入框，提升用户体验
                    $scope.message = '';
                }
            };
        });
    </script>
</body>
</html>

关键修改细节 #

• 正确使用指令：按钮上替换成ng-click="addMessage()"，这是触发点击事件的正确方式，解决第一个报错。
• 初始化变量：在控制器里定义$scope.message和$scope.messages，让AngularJS能找到这些变量，解决第二个报错。
• 优化添加逻辑：增加空输入判断，避免添加空白消息；添加完后清空输入框，让用户可以继续输入。
• ng-repeat优化：加上track by $index，避免当添加重复内容消息时出现AngularJS的重复元素报错。

现在你运行这个代码，输入消息点击添加按钮，消息就会一行行显示在输入框下方啦~

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