图片不会显示为我的 angularjs 小应用程序的一部分

Question

我编写了一个将华氏温度转换为摄氏温度的小应用程序，我希望根据华氏温度显示图片。我无法显示图片。有人可以告诉我哪里出错了吗？非常感谢。

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Fahrenheit to Celsius</title>
    <link href="css/styles.css" rel="stylesheet" type="text/css" />
    <script src="app/lib/angular.min.js"></script>
    <script src="app/app.js"></script>
    <script src="app/fahrenConvService.js"></script>

  </head>
  <body ng-app="myModule">
    <div ng-controller="myController">
        <table>
            <tr>
                <td>Fahrenheit</td>
                <td><input type="number" ng-model="input" /></td>
            </tr>
            <tr>
                <td>Celsius</td>
                <td><input type="text" ng-model="output" /></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="button" ng-click="transformFahrenheit(input)" value="Convert to Celsius" /></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="button" ng-click="clearInputOutput()" value="Clear" /></td>
            </tr>
            <tr>
                <td></td>
                <td><img ng-src="{{image}}" /></td>
            </tr>
        </table>
    </div>
</body>
</html>

JS

var app = angular.module("myModule", [])
    .controller('myController', function ($scope, fahrenConvService) {
        $scope.transformFahrenheit = function (input) {
            $scope.output = fahrenConvService.processFahrenNumber (input);
            $scope.image = imageService.whichImage (input);
        }

        $scope.clearInputOutput = function () {
            $scope.output = "";
            $scope.input = "";
        }

    });



app.factory('fahrenConvService', function () {
    return {
        processFahrenNumber: function (input) {
            if (!input) {
                return input;
            }
            var output = "";
            output = Math.round((input - 32) * (5/9));
            return output;

        }
    };
});



app.factory('imageService', function () {
    return {
        whichImage: function (input) {
        if (input < 50) {
                $scope.image = [{src: 'images/snow.jpg'}];
            } else {
                $scope.image = [{src: 'images/sunset.jpg'}];
            }   
        }
    };
});

Answer 1

您不能在工厂内注入 $scope。您需要从工厂摆脱 $scope 并从 whichImage 方法

中执行 return 图像路径

app.factory('imageService', function () {
    return {
        whichImage: function (input) {
        if (input < 50) {
                return {src: 'images/snow.jpg'};
            } else {
                return {src: 'images/sunset.jpg'};
            }   
        }
    };
});

然后更改您的 td 以通过访问 image.src

获取图像

<td><img ng-src="{{image.src}}" /></td>

图片不会显示为我的 angularjs 小应用程序的一部分

Picture won't display as part of my little angularjs app

javascript

angularjs

angularjs-scope

angularjs-controller

angularjs-factory