Angular JS" pageslide-directive"

时间:2015-03-20 14:31:44

标签: javascript html angularjs

我对棱角分明的Js更新鲜。我想使用pageslide-Directive。下面我分享了示例模板。如何在该面板中动态加载该内容..请建议。

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

1 个答案:

答案 0 :(得分:1)

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