如何使用AngularJS开发计算器？自研计算器故障求排查

Hey there! Let's troubleshoot your AngularJS calculator issue. Since you mentioned your code isn't running correctly but haven't shared the full snippet yet, I'll walk through the most common pitfalls developers hit with this kind of project, plus share a working example you can compare against your own code.

• Forgot to include AngularJS: If you haven't added the AngularJS library to your HTML, none of the framework's directives (ng-app, ng-controller, ng-model) will work. Double-check that you've got the script tag pointing to your local AngularJS file.
• Controller not registered: Make sure your controller is properly attached to your AngularJS module. If the app can't find the controller, your logic won't fire when buttons are clicked.
• Scope binding mistakes: If you're using $scope (or controllerAs syntax) incorrectly, your input values and calculation functions won't connect to the DOM.
• Broken calculation logic: Syntax errors in your calculation function (like missing operators, unhandled edge cases) can cause the calculator to freeze or show incorrect results.

Here's a minimal, functional version you can use as a reference:

HTML Code #

<!DOCTYPE html>
<html ng-app="calculatorApp">
<head>
    <title>AngularJS Calculator</title>
    <!-- Make sure to add the AngularJS library here -->
    <script src="angular.min.js"></script>
    <script src="calculator.js"></script>
</head>
<body ng-controller="CalculatorController as calc">
    <div class="calculator">
        <!-- Display input/result -->
        <input type="text" ng-model="calc.input" readonly class="display">
        
        <!-- Number buttons -->
        <div class="button-row">
            <button ng-click="calc.append('7')">7</button>
            <button ng-click="calc.append('8')">8</button>
            <button ng-click="calc.append('9')">9</button>
            <button ng-click="calc.append('/')" class="operator">/</button>
        </div>
        <div class="button-row">
            <button ng-click="calc.append('4')">4</button>
            <button ng-click="calc.append('5')">5</button>
            <button ng-click="calc.append('6')">6</button>
            <button ng-click="calc.append('*')" class="operator">*</button>
        </div>
        <div class="button-row">
            <button ng-click="calc.append('1')">1</button>
            <button ng-click="calc.append('2')">2</button>
            <button ng-click="calc.append('3')">3</button>
            <button ng-click="calc.append('-')" class="operator">-</button>
        </div>
        <div class="button-row">
            <button ng-click="calc.append('0')">0</button>
            <button ng-click="calc.clear()" class="clear">C</button>
            <button ng-click="calc.compute()" class="equals">=</button>
            <button ng-click="calc.append('+')" class="operator">+</button>
        </div>
    </div>
</body>
</html>

JavaScript Code (save as calculator.js) #

angular.module('calculatorApp', [])
.controller('CalculatorController', function() {
    // Using controllerAs syntax (cleaner than $scope for larger apps)
    var vm = this;
    vm.input = '';

    // Append characters to the display
    vm.append = function(value) {
        vm.input += value;
    };

    // Clear the display
    vm.clear = function() {
        vm.input = '';
    };

    // Calculate the result
    vm.compute = function() {
        try {
            // Note: eval() is used here for simplicity. For production, use a safe expression parser like math.js
            vm.input = eval(vm.input);
        } catch (err) {
            vm.input = 'Error';
        }
    };
});

• Avoid eval() in production: The example uses eval() to keep things simple, but it's not secure if users can input arbitrary code. For a real-world app, use a dedicated library to parse and evaluate math expressions safely.
• Input validation: You can add checks to prevent invalid inputs (like multiple operators in a row, leading zeros) to make the calculator more robust.
• Styling: The example has basic class names—you can add CSS to make it look like a real calculator.

If you share your specific code snippet, I can help pinpoint exactly where things are going wrong!

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