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

时间:2016-09-27 20:58:21

标签: javascript angularjs angularjs-scope angularjs-controller angularjs-factory

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

HTML

$results = foreach ($employee in $source)
{
    $update = $change | Where-Object { $employee.surname -eq $_.surname -and $employee.givenname -eq $_.givenname } | Select -First 1

    if ($update)
    {
        $employee | Add-Member -MemberType NoteProperty -Name NewEmailAddress -Value $update.emailaddress
    }

    $employee
}

JS

<!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>

1 个答案:

答案 0 :(得分:1)

您无法在工厂内注入$scope。你需要从工厂和工厂摆脱$scopewhichImage方法

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

然后通过访问image.src

更改您的td以获取图片
<td><img ng-src="{{image.src}}" /></td>