Question

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

我正在尝试将模板拆分成更小的部分/部分。我已经开始使用菜单栏了。

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

HTML索引

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

在index.html上，我只需使用。

调用该指令

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

这个mentis是我使用的库。

Answer 1

你需要$编译任何动态html才能使它正常工作：https://docs.angularjs.org/api/ng/service/ $ compile

这篇文章应该有所帮助：

Angular JS Directive - Template, compile or link?

也：

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

使用指令后，AngularJS下拉列表不再有效

1 个答案: