CODEWITHSUNDEEP
dartinnerhtmlangular-dart
curt
curt

Reputation: 4582

How to Retrieve innerhtml in Angular Dart

I'm tinkering with the code from the Angular Dart tutorial to make use of the Tooltip class. Rather than have the text for the tooltip in the Dart file, I want to place it in the html file. I've tried

dom.Element footnote;
footnote = querySelector("#fn1");
htext = footnote.innerhtml;

This code is in the Tooltip class. I get warnings on the last two lines and the Dart doesn't run nor does it throw an error. How do I retrieve HTML from the main html file (i.e., not from a component html file)?

The original code is from the angular dart website tutorial, chapter four. The unchanged code doesn't build cleanly, but it doesn't appear to affect it operation. This is a known bug for which there is an open issue.

pub build output

[Info from Dart2JS]:
Compiling tutorial|web/main.dart... 
[Dart2JS on tutorial|web/main.dart]:
1 warning(s) suppressed in package:tutorial.
[Info from Dart2JS]:
Took 0:00:11.779928 to compile tutorial|web/main.dart.
Built 182 files to "build".

This output is with the last line commented out

tooltip.dart

library tooltip;

import 'dart:html' as dom;
import 'package:angular/angular.dart';
@Decorator(selector: '[tooltip]')

class Tooltip
{
  final dom.Element element;

  @NgOneWay('tooltip')
  TooltipModel displayModel;

  dom.Element tooltipElem;
  dom.Element footnote;

  Tooltip(this.element)
  {
    element..onMouseEnter.listen((_) => _createTemplate())
           ..onMouseLeave.listen((_) => _destroyTemplate());
  }

  void _createTemplate()
  {
    assert(displayModel != null);

tooltipElem = new dom.DivElement();


    footnote = querySelector("#fn1");
    htext = footnote.innerhtml;


    if (displayModel.text != null)
    {
      dom.DivElement textSpan = new dom.DivElement()
          ..appendHtml(displayModel.text)
          ..style.color = "white"
          ..style.fontSize = "smaller"
          ..style.paddingBottom = "5px";

      tooltipElem.append(textSpan);
    }

    tooltipElem.style
        ..padding = "5px"
        ..paddingBottom = "0px"
        ..backgroundColor = "black"
        ..borderRadius = "5px"
        ..width = "${displayModel.imgWidth.toString()}px";

    // position the tooltip.
    var elTopRight = element.offset.topRight;

    tooltipElem.style
        ..position = "absolute"
    ..top = "${elTopRight.y}px"
    ..left = "${elTopRight.x + 10}px";

    // Add the tooltip to the document body. We add it here because we need to position it
    // absolutely, without reference to its parent element.
    dom.document.body.append(tooltipElem);
  }

   void _destroyTemplate()
  {
    tooltipElem.remove();
  }
}

class TooltipModel
{
  final String text;
  final int imgWidth;

  TooltipModel(this.text, this.imgWidth);
}

As you can see, I'm not using the html yet. I'm trying to get it to work one step at a time.

index.html

<!DOCTYPE html>
<html ng-app>
<head>
    <title>Chapter Four - A Simple Recipe Book</title>
    <link rel="stylesheet" href="style.css">

    <script src="packages/web_components/webcomponents.js"></script>
    <script src="packages/web_components/dart_support.js"></script>
</head>
<body>
  <recipe-book></recipe-book>

  <div id="fn1">
    <h2>Citation</h2>
    <p>source specification</p>
    <p>additional information</p>
  </div>

  <script type="application/dart" src="main.dart"></script>
  <script type="text/javascript" src="packages/browser/dart.js"></script>
</body>
</html>

I added the div with the id fn1.

Answer

To summarize Günter Zöchbauer answers, I made the following changes to get it to work:

footnote = dom.querySelector("#fn1");
String htext = footnote.innerHtml;

Upvotes: 1

Views: 455

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657338

You have import 'dart:html' as dom; which means that querySelector (without qualifier) can't be found or is used from another unqualified import if found.
With 

footnode = dom.querySelector("#fn1");
// or 
footnode = dom.document.querySelector("#fn1");

the whole document is searched except the content of shadow DOMs. If you want to search the shadow DOMs too you can use 

footnote = dom.document.querySelector("* /deep/ #fn1");

or 

footnote = dom.document.querySelector("* >>> #fn1");

The 2nd version is the newest but I don't know which browsers or polyfills support it yet.

Upvotes: 1

Related Questions