问不呈现角的Famous.js
EN

Stack Overflow用户

提问于 2014-05-28 07:18:30

回答 1查看 699关注 0票数 0

我已经创建了下面的例子--著名的角度示例，但是它没有正常工作。

<html ng-app="famous-angular">
<head>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/requirejs/require.js"></script>

<script src="bower_components/famous-angular/dist/famous-angular.min.js"></script>


<link rel="stylesheet"
    href="bower_components/famous-angular/dist/famous-angular.css">

<script>
    angular.module("controller.homepage", ["famous.angular"]).controller(
            "homepageExamplesCtrl", [ "$scope", function($scope) {
                $scope.test = "abc";
                $scope.options = {
                    grid : {
                        dimensions : [ 2, 2 ]
                    }
                }, $scope.squares = [ {
                    x : 0
                }, {
                    x : 75
                }, {
                    x : 150
                }, {
                    x : 225
                } ], $scope.translateX = 50
            } ]), angular.module("famous-angular", [ "controller.homepage",
                                                    "famous.angular"  ]);
</script>
</head>
<body>
    <div>       
        <div fa-app style="height: 160px;">
          <fa-grid-layout ng-controller="homepageExamplesCtrl" fa-options="options.grid">
            <fa-surface fa-size="[60, 60]" class="square" ng-repeat="square in squares">
                {{options.grid.dimensions}}
            </fa-surface>
          </fa-grid-layout>
        </div>
    </div>

    <div fa-app style="height: 300px">
        <div ng-controller="homepageExamplesCtrl">
            <fa-modifier ng-repeat="square in squares" class="rotateMod"
                fa-translate="[square.x, 50, 2]" fa-origin="[.125, .125]">
            <fa-surface class="square" fa-size="[40, 40]"></fa-surface> </fa-modifier>
            <fa-animation autoplay="true" duration="1200" loop="true">
            <animate targetModSelector=".rotateMod" field="rotateZ"
                startValue="0" endValue="6.283" curve="linear"></animate> </fa-animation>
        </div>
    </div>


</body>
</html>

它没有展示著名的动画。

有人能指点我哪里错了吗？

angularjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-05-28 08:05:33

我发现了我丢失的错误

 <script>
        require.config({
            baseUrl : 'bower_components'
        })
    </script>

还有css类

.square {
    background-color: #da262e;
    position: absolute
}

因此，最终输出html现在如下所示

<html ng-app="famous-angular">
<head>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/requirejs/require.js"></script>
<script>
            require.config({
                baseUrl : 'bower_components'
            })
        </script>

<style>
.square {
    background-color: #da262e;
    position: absolute
}

</style>
<script src="bower_components/famous-angular/dist/famous-angular.min.js"></script>


<link rel="stylesheet"
    href="bower_components/famous-angular/dist/famous-angular.css">

<script>
    angular.module("controller.homepage", [ "famous.angular" ]).controller(
            "homepageExamplesCtrl", [ "$scope", function($scope) {
                $scope.test = "abc";
                $scope.options = {
                    grid : {
                        dimensions : [ 2, 2 ]
                    }
                }, $scope.squares = [ {
                    x : 0
                }, {
                    x : 75
                }, {
                    x : 150
                }, {
                    x : 225
                } ], $scope.translateX = 50
            } ]), angular.module("famous-angular", [ "controller.homepage",
            "famous.angular" ]);
</script>
</head>
<body>
    <div>
        <div fa-app style="height: 160px;">
            <fa-grid-layout ng-controller="homepageExamplesCtrl"
                fa-options="options.grid"> <fa-surface
                fa-size="[60, 60]" class="square" ng-repeat="square in squares">
            {{options.grid.dimensions}} </fa-surface> </fa-grid-layout>
        </div>
    </div>
    <span>*******************************************</span>
    <div fa-app style="height: 300px">
        <div ng-controller="homepageExamplesCtrl">
            <fa-modifier ng-repeat="square in squares" class="rotateMod"
                fa-translate="[square.x, 50, 2]" fa-origin="[.125, .125]">
            <fa-surface class="square" fa-size="[40, 40]"></fa-surface> </fa-modifier>
            <fa-animation autoplay="true" duration="1200" loop="true">
            <animate targetModSelector=".rotateMod" field="rotateZ"
                startValue="0" endValue="6.283" curve="linear"></animate> </fa-animation>
        </div>
    </div>

</body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/23905094

复制

相似问题

问不呈现角的Famous.js
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不呈现角的Famous.jsEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不呈现角的Famous.js
EN