在Angular Dart组件中使用Bootjack组件

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

mytest.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();
    }
}

目前我有Dropdown.use()在TestingComponent类，但它不工作，如果我有在它的main()。有人知道我做错了什么吗?

据我所知，BootJack不支持shadowDOM。当你设置Angular组件的'useShadowDom' : false属性时，它可能会工作。

相关内容

最新更新

热门标签：