Question

我知道过去曾经问过并回答过这个问题（How to Set Background image of div with ng-style），但有些事情对我不起作用，我不知道是什么。我想创建一个可以通过单击该季度一次更改四分之一的图像。因此，单击左上角，更改图像的左上角，依此类推。（在下面的例子中，初始图片是一只手掌中的青蛙，青蛙一次会消失四分之一。）我已经成功显示了初始图像，但点击没有完成任何事情。

试图创建一个jsfiddle，但Angular模块由于某种原因（http://jsfiddle.net/mhurwicz/4znn36gg/7/）不会加载到那里。

这是一个显示初始图像的实时版本，但在点击时不会像我希望的那样改变：

http://greendept.com/rana/ranatest.html

以下是我在上述网址中的代码：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ranatest</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
    <script>
        ()
        angular.module('myRanaAurora', []).controller('MyRanaAuroraController', function($scope, $timeout) {
            $scope.topLurl = "palm_with_frog.gif";
            $scope.topRurl = "palm_with_frog.gif";
            $scope.botLurl = "palm_with_frog.gif";
            $scope.botRurl = "palm_with_frog.gif";
            $scope.buttonPress = function (btn) {
                if (btn == 'topLurl') {
                    $scope.topLurl = "palm.gif";
                }
                else if (btn == 'topRurl') {$scope.topRurl = "palm.gif";}
                else if (btn == 'botLurl') {$scope.botLurl = "palm.gif";}
                else if (btn == 'botRurl') {$scope.botRurl = "palm.gif";}
            };
        });
    </script>
    <style>
        #container {
            position: absolute;
            height: 250px;
        }

        #topL {
            width: 125px;
            height: 125px;
            position: relative;
        }

        #topR {
            width: 125px;
            height: 125px;
            margin-left: 125px;
            margin-top: -125px;
            position: relative;
        }

        #botL {
            width: 125px;
            height: 125px;
            position: relative;
        }

        #botR {
            width: 125px;
            height: 125px;
            margin-left: 125px;
            margin-top: -125px;
            position: relative;
        }
    </style>
</head>

<body ng-app="myRanaAurora" ng-controller="MyRanaAuroraController">
    <div id="container">
        <div id="topL" ng-mousedown="buttonPress('topLurl')" ng-style="{'background': 'url({{topLurl}}) left top'}"></div>
        <div id="topR" ng-mousedown="buttonPress('topRurl')" ng-style="{'background': 'url({{topRurl}}) right top'}"></div>
        <div id="botL" ng-mousedown="buttonPress('botLurl')" ng-style="{'background': 'url({{botLurl}}) left bottom'}"></div>
        <div id="botR" ng-mousedown="buttonPress('botRurl')" ng-style="{'background': 'url({{botRurl}}) right bottom'}"></div>
    </div>
</body>
</html>

使用ng-style

0 个答案: