sovanna / angular-material-sidenav

Simple component that reproduce the Angular Material Style SideNav Menu from their own website
http://sovanna.github.io/angular-material-sidenav/
109 stars 55 forks source link

It doesn't work #42

Open liuhao2050 opened 7 years ago

liuhao2050 commented 7 years ago

the steps I do: 1.

 <link rel="stylesheet" href="/css/liveadmin/lib/angular-material.css" />
  <link rel="stylesheet" href="/css/liveadmin/lib/angular-material-sidenav.css>
<script src="angular/angular.min.js"></script>
<script src="/angular/angular-material.min.js"></script>
<script src="angular/angular-animate.min.js"></script>
<script src="angular/angular-ui-router.min.js"></script>
<script src="angular/angular-touch.min.js"></script>
<script src="angular/angular-material-sidenav.js"></script>
<script src="js/app.js"></script>

2. app.js:

`app = angular.module "guildApp",
    ['ui.router',
     'sasrio.angular-material-sidenav'
    ]
app.config (ssSideNavSectionsProvider)->
    ssSideNavSectionsProvider.initWithSections([{
        id:     'toogle_1',
        name:   'Section Heading 1',
        type:   'heading',
        children: [{
            name:   'Toogle 1',
            type:   'toggle',
            pages:  [{
                id:     'toggle_item_1',
                name:   'item 1',
                state:  'common.toggle.item1'
            }, {
                id:     'toggle_item_2',
                name:   'item 2',
                state:  'common.toggle.item2'
            }]
        }]
        }, {
            id:         'link_1',
            name:       'Simple link to Index state',
            state:      'common.index',
            type:       'link',
            hidden: true
        }]);
app.controller "indexCtrl", ($scope, $timeout, ssSideNav)->
    $scope.hello = "hello wrold"
    ($timeout, ssSideNav)->
        $scope.menu = ssSideNav;
        ssSideNav.setVisible('link_1');
        ssSideNav.setVisibleFor([{
          id: 'toggle_item_1',
          value: true
        }, {
          id: 'link_1',
          value: false
        }]);
        $timeout( ->
            ssSideNav.setVisible('toogle_2', false);
        )

        $timeout(
            ->
                ssSideNav.forceSelectionWithId('toogle_1_link_2')
            , 1000 * 3);
  1. html
<div ng-app="guildApp">
          <div ui-view layout="row" flex></div>
        <ss-sidenav menu="menu"></ss-sidenav>
        <div ng-controller="indexCtrl">
            {{hello}}
            <ss-sidenav menu="menu"></ss-sidenav>

        </div>

    </div>

but it doesn't work.....

sovanna commented 7 years ago

I think it depends on the version of angular. When I've made the component, I target some version of angular, material (which works in demo).

But I currently move to React (yeah..i know, kind of traitor haha) and I've stopped following upgrade of angular/material..

gonna see when I have time to update the component for you guys