current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I've got a problem employing angular-ui Bootstrap in my project. Namely dropdown directive.

By now i have HTML that is just a copy-paste from the examples:

<ul>
 <li class="dropdown">
   <a class="dropdown-toggle"> Drop!</a>
   <ul class="dropdown-menu">
     <li> one </li>
     <li> two </li>
   </ul>
 </li>
</ul>

When Angular compiles HTML this error is thrown for each dropdown i have on the page:

TypeError: Object [object Object] has no method 'parent'
at link (http://localhost:3000/vendor/ui-bootstrap-tpls-0.7.0.js:1316:15) 
at nodeLinkFn (http://localhost:3000/vendor/angular/angular.js:6124:13)
at compositeLinkFn (http://localhost:3000/vendor/angular/angular.js:5536:15)
at compositeLinkFn (http://localhost:3000/vendor/angular/angular.js:5539:13)
at compositeLinkFn (http://localhost:3000/vendor/angular/angular.js:5539:13)
at compositeLinkFn (http://localhost:3000/vendor/angular/angular.js:5539:13)
at compositeLinkFn (http://localhost:3000/vendor/angular/angular.js:5539:13)
at publicLinkFn (http://localhost:3000/vendor/angular/angular.js:5444:30)
at boundTranscludeFn (http://localhost:3000/vendor/angular/angular.js:5555:21)
at controllersBoundTransclude (http://localhost:3000/vendor/angular/angular.js:6145:18) <a class="dropdown-toggle">

This line binds click event on a.dropdown-toggle parent (that is li.dropdown obviously).

What am i doing wrong? I've lost more than three hours trying to solve this and still have no idea what can cause this error.

p.s. HTML is compiled from Jade, and i use Bootstrap 3, but i hope that's not the point this time.

UPD: as Nix asked, i include head and app.js

head
  title= title
  meta(charset='utf-8')
  meta(name='viewport', content='width=device-width, initial-scale=1')
  link(rel='stylesheet', href='/vendor/bootstrap/css/bootstrap.min.css')
  link(rel='stylesheet', href='/stylesheets/client/main.css')

  script(src='/vendor/jquery-1.10.2.min.js', type='text/javascript')
  script(src='/vendor/angular/angular.js', type='application/javascript')
  script(src='/vendor/angular/angular-route.js', type='application/javascript')
  script(src='/vendor/ui-bootstrap-tpls-0.7.0.js', type='text/javascript')

  script(src='/angular/client/app.js', type='text/javascript')
  script(src='/angular/client/menu/controllers.js', type='text/javascript')
  //a lot of other app stuff...

it's app.js

var app = angular.module('clientApp',[
  'ngRoute',
  'menuControllers'
]);

it's menu controllers 

var menu = angular.module('menuControllers', [
  'sharedModels',
  'ui.bootstrap'
]);
menu.controller('menuCtrl', ['$scope', 'categoriesModel', 'subcategoriesModel', menuCtrl]);

and the full source of menu.jade. it's included to body ng-app='clientApp'

div.container(ng-controller='menuCtrl')
  div(ng-repeat='cat in categoriesModel')
    div.btn-group
      a.btn.btn-default(href='#!/category/{{cat._id}}') {{cat.name}}
      ul
        li.dropdown
          a.dropdown-toggle Dropdown
          ul.dropdown-menu(ng-repeat='subcat in subcategoriesModel')
            li: a(ng-href='#!/subcategories/{{subcat._id}}') {{subcat.name}}
share|improve this question
    
Throw a fiddle at this question, and it will be answered within minutes. Looks like U have an object vs a jQuery selector but need some type of JS to figure it out. –  Nix Dec 12 '13 at 13:36
    
Well. it works it plunker and does not throw any error. plnkr.co/edit/ggNFUHDaJ6ZQLVRO66FJ –  Eugene Kostrikov Dec 12 '13 at 13:51
    
:) sometimes trying to reproduce the problem helps us fix the problem. Post some of your code (head tag) and js(where you setup angular). –  Nix Dec 12 '13 at 13:54
1  
I've updated the topic. To say the truth, it seems that i'd better rewrite this from scratch. –  Eugene Kostrikov Dec 12 '13 at 14:25
    
I'm searching for it but dont have much luck. Have you validated that you can browse to /vendor/jquery-1.10.2.min.js (i noticed your plunkr did not include it). –  Nix Dec 12 '13 at 14:58

1 Answer 1

up vote 0 down vote

Your plunkr doesn't match the jade(give me a broken plunkr and i can fix it). I know you are trying to target "dropdown" directive but sometimes there is some black magic that happens within angular that you might not think about. For instance the btn-group class could be a directive that is firing and wrecking shop. Please update the fiddle to match your jade, also make sure you call out any other angular OTS libraries that you are including in your project.

Shot in the dark:

Change:

ul.dropdown-menu(ng-repeat='subcat in subcategoriesModel')
    li: a(ng-href='#!/subcategories/{{subcat._id}}') {{subcat.name}}

to:

ul.dropdown-menu
    li(ng-repeat='subcat in subcategoriesModel'): a(ng-href='#!/subcategories/{{subcat._id}}') {{subcat.name}}
share|improve this answer
    
It seems to be some kind of black magic. plnkr.co/edit/ggNFUHDaJ6ZQLVRO66FJ No "parent()" error. Just the content on the dropdown list affected. Anyway, by now i have completely rewritten that module and it works! Still have no idea what have caused that error... –  Eugene Kostrikov Dec 12 '13 at 18:40

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.