Angular JS "pageslide-directive"

Angular JS "pageslide-directive"

本文关键字：quot pageslide-directive JS Angular      更新时间：2023-09-26

我对角度Js更新鲜。我想使用页面幻灯片指令。下面我分享了一个示例模板。如何在该面板中动态加载该内容。。请提出建议。

<head>
    <meta charset='utf-8' />
    <meta http-equiv="X-UA-Compatible" content="chrome=1" />
    <meta name="description" content="Ng-pageslide : AngularJS sliding panel for serving additional content" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
    <script  src="angular-pageslide-directive.js"></script>
    <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/foundation/5.0.0/css/foundation.min.css"> 
    <title>AngularJS Pageslide directive demo</title>
    <style>
        .ng-pageslide {
            background: #eee;
        }
    </style>
    <script>
       var app = angular.module("app", ["pageslide-directive"]);


    </script>
</head>
<body >
    <!-- MAIN CONTENT -->
    <div ng-app="app" ng-controller="test" id="" class="outer" style="padding:20px">           
         <a  class="large button" pageslide  ps-side="right" ps-speed="0.5"  ng-click="profile_action('')" href="#demo-right">Open Demo</a>         <div style="padding:20px" id="demo-right">
           {{ NAME}}
            <a id="demo-right-close"i class="button" >Close</a>
        </div>                                            
    </div>
</body>

您必须向面板添加一个控制器，并使用它将内容加载到面板的项目

相关文章：