2

Getting my feet wet with Angular.Dart. Reviewing these Exercises on GitHub

In chapter 2, when running index.html I noticed the classic flicker before mustaches replaced with data.

Applied the usual 'data-ng-cloak="" ' only to be shown a blank screen. Removed 'data-' and all is well.

Is this a Dartanium issue or is data-?? no longer applicable for Angular.Dart?

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

 <div recipe-book ng-cloak=""> <!-- blank screen if using 'data-ng-cloak' -->
   <h3>Recipe List - {{ctrl.CtrlName}}</h3>
   <ul>
     <li class="pointer"
      ng-repeat="recipe in ctrl.recipes"
      ng-click="ctrl.selectRecipe(recipe)">
    {{recipe.name}}
  </li>
</ul>

<h3>Recipe Details - {{ctrl.CtrlName}}</h3>
<div><strong>Name: </strong>{{ctrl.selectedRecipe.name}}</div>
<div><strong>Category: </strong>{{ctrl.selectedRecipe.category}}</div>
<div><strong>Rating: </strong>{{ctrl.selectedRecipe.rating}}</div>
<div>
  <ul>
    <li ng-repeat="ingredient in ctrl.selectedRecipe.ingredients">
      {{ingredient}}
    </li>
  </ul>
</div>
    <div><strong>Directions: </strong>{{ctrl.selectedRecipe.directions}}</div>
  </div>

  <script src="packages/shadow_dom/shadow_dom.min.js"></script>
  <script type="application/dart" src="../web/main.dart"></script>
  <script type="text/javascript" src="packages/browser/dart.js"></script>
</body>
</html>
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567

1 Answers1

2

As far as I know the 'data-` prefix is not yet supported but work in progress.

here you find the discussion https://github.com/angular/angular.dart/issues/519

You need to add the CSS that supports ng-cloak see also angular.dart seems to be slow

Community
  • 1
  • 1
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567