1

プロジェクトに 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();
    }
}

現在、 TestingComponent クラスに Dropdown.use() がありますが、 main() があると機能しません。私が間違っていることについて何か考えがある人はいますか?

4

1 に答える 1

1

私の知る限り、BootJack は shadowDOM をサポートしていません。'useShadowDom' : falseAngular コンポーネントの属性を設定すると、機能する場合があります。

于 2014-05-27T17:43:31.767 に答える