使用ngAside打开一个简单的左菜单Modal

时间:2016-02-17 12:40:18

标签: javascript angularjs angularjs-directive bootstrap-modal

我只想在以下存储库中使用ngAside的帮助下测试打开左模态:

  

https://github.com/dbtek/angular-aside

我认为我做得对,仍然可以找到js错误。有人可以帮忙吗?

index.html:

<html>

<head>
    <!-- Required CSS --> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"/>
    <!-- Required Scripts --> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.min.js"></script>
    <script src="../js/angular-aside.min.js"></script>
</head>

<body ng-app="myApp" ng-controller="myCtrl"> 
    <input type="text" ng-model="name"/> 
    {{name}}

    <script>
    //module declaration
    var app = angular.module('myApp',['ui.bootstrap', 'ngAside']);
    //Controller declaration
    app.controller('myCtrl',function($scope){

        $scope.name = "Peter";

        var asideInstance = $aside.open({
          templateUrl: 'aside.html',
          controller: 'AsideCtrl',
          placement: 'left',
          size: 'lg'
        });

    });

    app.controller('AsideCtrl',function($scope){


    });
    </script>
</body>

</html>

aside.html

Hello World!

错误:

enter image description here

1 个答案:

答案 0 :(得分:2)

要使用aside服务,你必须像这样注入它(注意构造函数中的$ aside注入):

 app.controller('myCtrl',function($scope, $aside){
...
    });