AngularJS Dropdown在使用指令后不再工作

AngularJS Dropdown no longer works after using Directives

本文关键字：不再 工作 指令 Dropdown AngularJS      更新时间：2023-09-26

所以，我正在玩AngularJS，但现在我有点卡住了......

我正在尝试将模板拆分为较小的部分/部分。我从菜单栏开始。

我创建了一个自定义指令，该指令使用所有菜单项加载模板 + 控制器。

网页索引 

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

在索引上.html我只是用 .

除了下拉菜单外，这一切都工作正常。我正在使用mentis，如果我保留所有代码@索引页，它可以正常工作，但是当我使用指令加载html时停止运行

这个精神是我使用的图书馆。

您需要

$compile任何动态html才能使其正常工作：https://docs.angularjs.org/api/ng/service/$compile

这篇文章应该有帮助：

Angular JS指令 - 模板，编译还是链接？

也：

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

相关文章：