尝试在Scrollyfy angularjs应用程序的每个窗格中插入不同的HTML代码_Html_Angularjs

尝试在Scrollyfy angularjs应用程序的每个窗格中插入不同的HTML代码

html angularjs

尝试在Scrollyfy angularjs应用程序的每个窗格中插入不同的HTML代码,html,angularjs,Html,Angularjs,所以我一直在努力理解这个AngularJS Scrollify指令，我想除了一件事之外，我已经理解了它的大部分内容我希望能够为数组中的每个窗格插入不同的HTML 我刚刚修改了他们网站上提供的应用程序的来源：我对它做了一些修改，使其成为重要部分： <html> <head> <title>angular-scrollify</title> <meta http-equiv="Content-Type" content=

所以我一直在努力理解这个AngularJS Scrollify指令，我想除了一件事之外，我已经理解了它的大部分内容

我希望能够为数组中的每个窗格插入不同的HTML

我刚刚修改了他们网站上提供的应用程序的来源：

我对它做了一些修改，使其成为重要部分：

<html>

<head>

    <title>angular-scrollify</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" type="text/css" href="example/styles.css">

</head>

<body ng-app="ExampleApp" ng-controller="ExampleCtrl">

    <div style="z-index: 1000;
                position: fixed;
                width: 100%;
                height: 100px;
                background-color: brown;">
    </div>

    <div class="scrollify"
        hj-scrollify="pane in data.panes"
         j-scrollify-options="{
            id: 'myScrollify'
        }">
        <!--j-scrollify-options="{
            id: 'myScrollify'
        }" PUT THIS BEFORE THE > AND AFTER THE " FROM ABOVE-->

        <div
            class="content"
            style="background-color: {{pane.color}}"
            ng-click="$scrollify.goTo($index)">
            <!--ng-attr-data-text="{{pane.name+pane.last}}" put in div above-->
        </div>

    </div>

    <script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
    <script type="text/javascript" src="bower_components/hamsterjs/hamster.js"></script>
    <script type="text/javascript" src="bower_components/lethargy/lethargy.js"></script>
    <script type="text/javascript" src="bower_components/hammerjs/hammer.js"></script>
    <script type="text/javascript" src="angular-scrollify.js"></script>
    <script type="text/javascript" src="example/app.js"></script>

</body>

</html>


角度滚动

但我希望能够为每个窗格使用不同的HTML。我转到app.js文件，尝试将一个htm文件链接到作用域中的一个变量，以便在hj scrollify循环中使用它。hj scrollify在窗格中存储data.panes数组，我希望能够在data.pane中有一个变量，在每个给定窗格中显示不同的html

下面是修改后的app.js代码

angular.module('ExampleCtrl', []).controller('ExampleCtrl', ['$scope','$http',
    function($scope,$http) {

        $scope.data = {};

        $scope.data.panes = [
            {
                color: '#' + ('000000' + Math.floor(Math.random() * 16777215).toString(16)).slice(-6),
                name: "hon",
                last: "doe",
                html: ""
            },
            {
                color: '#' + ('000000' + Math.floor(Math.random() * 16777215).toString(16)).slice(-6),
                name: "son",
                last: "so",
                html: ""
            }
        ];

        $http.get("pane1.htm").then(function(d){
            $scope.data.panes[0].html=d.data;
        });


        /*for (var i = 0; i < 50; i++) {

            $scope.data.panes[i] = {
                text: i + 1,
                color: '#' + ('000000' + Math.floor(Math.random() * 16777215).toString(16)).slice(-6),
                customHTML: "<h1>Hi</h1>"
            };

        }*/

        $scope.top = function() {
            $scope.$broadcast('scrollify:goTo', {
                pane: 0,
                speed: 0,
                id: 'myScrollify' // optional
            });
        };

        $scope.$on('scrollify:change', function(event, args) {
            console.log(args);
        });

    }
]);

angular.module('ExampleApp', ['hj.scrollify', 'ExampleCtrl']).config(function() {});

angular.module（'ExampleCtrl'，[]）.controller（'ExampleCtrl'，['$scope'，'$http',，
函数（$scope，$http）{
$scope.data={}；
$scope.data.panes=[
{
颜色：“#”+（“000000”+Math.floor（Math.random（）*16777215.toString（16））.slice（-6），
姓名:"hon"，
最后：“doe”，
html:“
},
{
颜色：“#”+（“000000”+Math.floor（Math.random（）*16777215.toString（16））.slice（-6），
姓名：“儿子”，
最后：“所以”，
html:“
}
];
$http.get（“pane1.htm”）。然后（函数（d）{
$scope.data.panes[0].html=d.data；
});
/*对于（变量i=0；i<50；i++）{
$scope.data.panes[i]={
文本：i+1，
颜色：“#”+（“000000”+Math.floor（Math.random（）*16777215.toString（16））.slice（-6），
自定义HTML：“嗨”
};
}*/
$scope.top=函数（）{
$scope.$broadcast（'scrollify:goTo'{
窗格：0，
速度：0，
id:'myScrolify'//可选
});
};
$scope.$on（'scrollify:change'，函数（事件，参数）{
console.log（args）；
});
}
]);
angular.module（'ExampleApp'，['hj.scrollify'，'ExampleCtrl']）.config（function（）{}）；

我有一个名为pane.htm的文件，其中包含一些HTML:

I'm pane 1

，我希望它只显示在第一个窗格中，然后我将另一个文件设置为data.pane[1].HTML，并具有不同的HTML

我该怎么做呢？

我做到了

好吧，我做的是：

我需要向控制器添加$sce，并执行如下操作：

angular.module('ExampleCtrl', []).controller('ExampleCtrl', ['$scope','$http','$sce',function($scope,$http,$sce)

二,。然后，当我从其他文件中设置html代码时，我会执行以下操作：

    $http.get("pane1.htm").then(function(d){
        $scope.data.panes[0].html=$sce.trustAsHtml(d.data);
    });

在我的HTML中，我放了以下内容：

<div
    class="content"
    style="background-color: {{pane.color}}"
    ng-click="$scrollify.goTo($index)">
    <div ng-bind-html="pane.html"></div>
</div>

它是有效的。希望这能帮助一些人，因为Scrollyfy对我来说很难理解