AngularJS Dropdown no longer works after using Directives

Question

So, I'm playing around with AngularJS but now I'm kinda stuck....

I'm trying to split the template into smaller pieces/partials. I've started with the menu bar.

I created a custom directive that loads the template + controller with all the menu items.

HTML index

<!DOCTYPE html>
<html lang="en-us" ng-app="someApp">
<head>
  <meta charset="utf-8">
  <title>Magazijn</title>
  <base href="/">
  <!-- Stylesheets -->
</head>
<body>
<main-menu></main-menu> 

<div id="page-wrapper" ng-class="globals.currentUser == null ? 'max' : ' '">
    <div id="page-inner">
        <div class="container">
            <div ng-view></div>
        </div>
    </div>
</div>

<!-- jQuery / Bootstrap / Morris -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/2.5.0/metisMenu.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script src="/assets/js/main.js"></script>

<!-- Angular -->
<script src="https://code.angularjs.org/1.5.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.4/angular-route.min.js"></script>
<script src="https://code.angularjs.org/1.5.4/angular-cookies.min.js"></script>
<script src="/angular/app.js"></script>
<script src="/angular/routes.js"></script>

<!-- Services -->
<script src="/angular/services/auth-service.js"></script>
<script src="/angular/services/api-service.js"></script>

<!-- Directives -->
<script src="/angular/directives/menu-directive.js"></script>

<!-- Controllers -->
<script src="/angular/controllers/trucks-index-controller.js"></script>
<script src="/angular/controllers/trucks-show-controller.js"></script>
<script src="/angular/controllers/trucks-history-controller.js">      </script>
<script src="/angular/controllers/monitor-controller.js"></script>
<script src="/angular/controllers/messages-index-controller.js">  </script>
<script src="/angular/controllers/login-controller.js"></script>

JS

(function () {
'use strict';

angular
    .module('app')
    .controller('menuCtrl' , ['$scope','$timeout', function($scope, $timeout){
        $scope.menu = {
            "items" : [{
                "name"  : "Dashboard",
                "url"   : "/",
                "icon"  : "fa fa-dashboard fa-3x"
            },
            {
                "name"  : "TV Monitor",
                "url"   : "/monitor",
                "icon"  : "fa fa-television fa-3x"
            },{
                "name"  : "Trucks",
                "url"   : "",
                "icon"  : "fa fa-truck fa-3x",
                "childs": [{
                    "url"   : "/trucks",
                    "name"  : "Overview"
                },{
                    "url"   : "/trucks/history",
                    "name"  : "History"
                }]
            }]
        };
    }])
    .directive('mainMenu' , function(){
        return {
            restrict: 'E',
            controller: 'menuCtrl',
            templateUrl : '/templates/partial/nav.html'
        }
    })})();

HTML

<nav class="navbar-default navbar-side" role="navigation">
    <div class="sidebar-collapse">
        <ul class="nav" id="main-menu">
            <li ng-repeat="m in menu.items">
                <a href="{{m.url}}"><i class={{m.icon}}></i>{{m.name}} <span ng-if="m.childs.length > 1" class="fa arrow fa-2x"></span></a>
                <ul class="nav nav-second-level collapse">
                    <li ng-repeat="c in m.childs">
                        <a href="{{c.url}}">{{c.name}}</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

And on the index.html I simply call the directive with .

This all works fine except for the dropdown. I'm using mentis, which works fine if I leave all the code @ the index page, but stops functioning when I load the html with a directive

This mentis is the library I used.

Community · Accepted Answer · 2017-05-23 11:52:47Z

0

You need to $compile any dynamic html to make it work correctly: https://docs.angularjs.org/api/ng/service/$compile

This post should help:

Angular JS Directive - Template, compile or link?

also:

http://www.bennadel.com/blog/2794-when-do-you-need-to-compile-a-directive-in-angularjs.htm

edited May 23, 2017 at 11:52

CommunityBot

11 silver badge

answered Apr 28, 2016 at 13:49

davoc bradley

2202 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jeffrey Over a year ago

Thanks! Will look into that :)

Collectives™ on Stack Overflow

AngularJS Dropdown no longer works after using Directives

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related