1

我正在尝试为我的项目使用 Angular Dart 和 Bootjack。我有一个小型测试程序，我在其中编写了一个使用 Bootjack 下拉菜单的组件，但是 onclick 似乎不起作用。如果我将相同的 html 代码放在 main.html 中它可以正常工作，它只是不能从组件的 html 内部工作。这是我目前正在使用的代码。

我的测试.html

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>MyTest</title>
    <link rel="stylesheet" href="packages/bootjack/css/bootstrap.min.css">
    <link rel="stylesheet" href="packages/bootjack/css/bootstrap-theme.min.css">
  </head>
  <body>    

    <testing></testing>

    <script src="packages/shadow_dom/shadow_dom.min.js"></script>
    <script type="application/dart" src="mytest.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

mytest.dart

library myTest;

import 'dart:html';
import 'package:bootjack/bootjack.dart';

import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';
import '../lib/test/test_component.dart';

void main() {
  applicationFactory()
      .addModule(new MyAppModule())
      .run();
}

class MyAppModule extends Module {
  MyAppModule() {
    type(TestingComponent);
  }
}

test_component.html

<nav class="navbar navbar-inverse" role="navigation">
  <div class="container-fluid">
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

test_component.dart

library testing;

import 'package:angular/angular.dart';
import 'package:bootjack/bootjack.dart';

@Component(
    visibility: Directive.CHILDREN_VISIBILITY,
    selector: 'testing',
    templateUrl: '../lib/test/test_component.html',
    publishAs: 'cmp',
    applyAuthorStyles: true)

class TestingComponent {
  TestingComponent() {
      Dropdown.use();
    }
}

目前我在 TestingComponent 类中有 Dropdown.use() ，但如果我在里面有 main() 它也不起作用。有人对我做错了什么有任何想法吗？

4

1 回答 1

1

据我所知，BootJack 不支持 shadowDOM。当您设置'useShadowDom' : falseAngular 组件的属性时，它可能会起作用。

于 2014-05-27T17:43:31.767 回答