Question

我创建了以下示例着名的角度示例，但它无法正常工作

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

它没有显示着名的动画。

任何人都可以指导我错误的地方

Answer 1

我发现了我错过的错误

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

Famous.js不用角度渲染

1 个答案: