CODEWITHSUNDEEP
htmlangularjssemantic-ui
BlueLettuce16
BlueLettuce16

Reputation: 2103

Semantic-ui menu and Angularjs ngRoute

I am using the Semantic-UI with AngularJS and I have a problem with semantic-ui menu. In the index.html file I define the main menu:

<div class="ui inverted tiered menu">           
        <a class="active item" href="#/login">
            <i class="sign in icon"></i> Login
        </a>            
        <div class="ui dropdown item">
            <i class="users icon"></i> TEST <i class="icon dropdown"></i>
            <div class="menu">
                <a class="item" href="#/test/test1"><i class="add icon"></i>Dodaj</a>
            </div>
        </div>
    </div>
    ...
    <div ng-view></div>

In app.js I have:

hrmApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/login', {
            templateUrl: '/login.html',
            controller: 'LoginController'
        }).
        when('/comment', {
            templateUrl: '/test.html',
            controller: 'TestController'
        }).
        otherwise({
            redirectTo:'/login'
        });
}]);

When I navigate to the site using /test/test1 then the dropdown menu works however when I navigate to the site using /login and then reload page (ctrl+r) then the dropdown menu doesnt work. What may be the cause of this problem?

Upvotes: 1

Views: 379

Answers (1)

BlueLettuce16
BlueLettuce16

Reputation: 2103

I solved the problem. I have multiple controllers and ui.dropdown was initalized only in one of them using code presented below:

    $('.ui.dropdown').dropdown();

Adding this code in other controllers solved it.

Upvotes: 1

Related Questions