Угловая простая директива не работает

Я новичок в угловой и очень очень рад этому. Я пытаюсь поставить свою верхнюю навигацию в директиву, так что она может быть 1) resuable 2) сделать мой html более удобным для чтенияУгловая простая директива не работает

Однако я не могу заставить свою директиву topMenu работать на жизнь меня. можно ли взглянуть на мою скрипку и посмотреть, что я делаю неправильно? Спасибо миллиона, им теряют волосы лол

http://jsfiddle.net/g6pb0m4a/ здесь подаст menu.js

//define menu controller 
var menu = angular.module('MenuApp', []) 
    menu.controller('MenuCtrl', [function() { 
     var self = this; 
     self.active= '1'; 
     self.navigation = [ 
    { 
     menutext:"Home", 
     url:"#/" 
    }, 
    { 
     menutext:"About App", 
     url: "#/aboutapp", 
     submenu:[ 
     { 
      menutext:"Pricing", 
      url: "#/pricing" 
     } 
     ] 
    } 
    ]; 

    }]); 

menu.directive('topMenu', function() { 
    return { 
    restrict: 'E', 
    template: '<h2>test</h2>' 
    }; 
});

здесь мой индекс

<!DOCTYPE html> 
<html> 
<head> 
<title>Fit Bit App</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script> 
<link href="css/default.css" rel="stylesheet"> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> 
<script src ="app/controllers/menu.js"></script> 
</head> 

<body ng-app="MenuApp"> 
<header> 
    <nav class="navbar navbar-inverse" data-ng-controller = "MenuCtrl as menuCtrl"> 
     <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">WebSiteName</a> 
     </div> 
     <div class="collapse navbar-collapse" id="myNavbar"> 
      <ul class="nav navbar-nav" data-ng-repeat = "menuitem in menuCtrl.navigation"> 
      <li ng-if="!menuitem.submenu"><a href={{menutext.url}}>{{menuitem.menutext}}</a></li> 
      <li class="dropdown" ng-if="menuitem.submenu"><a class="dropdown-toggle" data-toggle="dropdown" href="#">{{menuitem.menutext}}<span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
        <li data-ng-repeat = "submenu in menuitem.submenu"><a href={{submenu.url}}>{{submenu.menutext}}</a></li> 
       </ul> 
      </li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> 
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
      </ul> 
     </div> 
     </div> 
    </nav> 

</header> 

<div><top-menu></top-menu></div> 

</body> 
</html>

источник

2015-01-19 Brandon Braner

Вам необходимо загрузить в меню jsfiddle скрипты на корпусе или голове. http://jsfiddle.net/jL8mq5hc/. то есть. выпадающая панель левой панели «no-wrap -in body». В противном случае вы загружаете скрипты на загрузку документа с помощью опции «load». – PSL

Ваш вопрос в основном из-за то место, где вы регистрируете приложение и контроллер. В вашей скрипке вы используете опцию onLoad, поэтому с помощью jsfiddle загрузите скрипты на панели скриптов внутри window.onload, что происходит после того, как угловой попытается загрузить приложение, поскольку оно находит директиву ng-app в html. Вместо использования опции onLoad используйте опцию wrap in body (или голова), чтобы скрипты на панели скриптов запускались заранее, а угловые экземпляры вашего приложения MenuApp. Working Fiddle

источник

2015-01-19 01:50:43 PSL

Теперь я действительно смущен. он работает на скрипке, однако в моей обычной загрузке приложения на моем сервере он не загружает директиву. Любая идея, основанная на коде, что может быть неправильно? –

Не могу сказать, не зная, что вы делаете в своем реальном сценарии. Вы также должны посмотреть на ошибки в консоли. – PSL

нет сообщения об ошибке в консоли, подтолкнуло его к github, если вы не возражаете за две секунды. что-то настолько просто потрачено впустую на время моего времени lol https://github.com/blbraner/fitbitapp –

Угловая простая директива не работает

ответ

Смежные вопросы