I am trying to use Angular Dart and Bootjack for my project. I have a small test program in which I've written a component that uses the dropdown from Bootjack, however the onclick does not seem to be working. If I put the same html code in the main.html it works correctly, it just does not work from inside the component's html. Here is the code I am currently using.
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();
}
}
Currently I have Dropdown.use() in the TestingComponent class, but it does not work if I have in it main() either. Does anyone have any ideas about what I am doing wrong?
As far as I know doesn't BootJack support shadowDOM. When you set the attribute
'useShadowDom' : falseof your Angular component it might work.