angular ui下拉切换[object object]没有方法父级

angular-ui dropdown-toggle [object Object] has no method parent

本文关键字：object 有方法 ui angular      更新时间：2023-09-26

我在项目中使用angular ui Bootstrap时遇到了一个问题。即下拉指令。

到目前为止，我已经有了HTML，它只是示例中的复制粘贴：

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

当Angular编译HTML时，我在页面上的每个下拉列表都会抛出这个错误：

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

此行将click事件绑定到.dropdowntoggle父对象上（显然是li.dropdown）。

我做错了什么？我已经花了三个多小时试图解决这个问题，但仍然不知道是什么原因导致了这个错误。

p.s.HTML是从Jade编译的，我使用Bootstrap 3，但我希望这次不是重点。

UPD：正如尼克斯所问，我包括head和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...

它是app.js

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

是菜单控制器

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

以及menu.jade的完整来源。它包含在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}}

您的plunkr与玉石不匹配（给我一个坏的plunkr，我可以修复它）。我知道你试图针对"下拉"指令，但有时会有一些你可能不会想到的黑魔法发生在角度内。例如，btn组类可以是一个正在解雇和破坏车间的指令。请更新fiddle以匹配您的翡翠，同时确保您调用了您项目中包含的任何其他角度OTS库。

在黑暗中拍摄：

更改：

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

至：

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