Бумажная карточка Polymer 1.0 отображает переменные привязки {{ }} так, как они находятся внутри Angularjs ng-repeat - [Проблема только в Chrome]

Я очень новичок в angularjs, я сделал несколько экспериментальных проектов в Polymer 0.5, поэтому новичок и в Polymer 1.0.

Я столкнулся с проблемой, например, внутри ng-repeat я хочу отобразить бумажную карточку.

Эта проблема возникает только в браузере Chrome. В Firefox и IE-edge все нормально.

<paper-card heading="{{ team.name }}">

  <div class="card-content">Some content</div>
  <div class="card-actions">
    <paper-button>Some action</paper-button>
  </div>
</paper-card>

//------------ HTML ----------

   <div class="row content">
    <div><h3>Teams  <img ng-show="loading" ng-src='images/loader2.gif' width="30px" height="30px"/></h3></div>
    <div ng-repeat="team in teams" ng-repeat="team in teams | filter:teamsFilter">
      <div>
        <style>
          .collapse-content {
            padding: 15px;
            border: 1px solid #dedede;
          }
        </style>

        <paper-card heading="{{ team.name }}">

           <div class="card-content">Some content</div>
           <div class="card-actions">
              <paper-button>Some action</paper-button>
           </div>
        </paper-card>       

      </div>
    </div>
    </div>

//------------ HTML -------------

Я использую модуль ng-polymer-element,

У меня есть приведенный ниже код в моем приложении app.js

    angular.module('ng-polymer-elements').constant('$ngPolymerMappings', {
      paperCard: {
            ngModel: function property(element) {
              return element.hasAttribute('multi') ? 'selectedValues' : 'selected';
            },
            ngHeading: '=heading'
        }
    });

window.addEventListener('WebComponentsReady ', function() {
  angular.bootstrap(wrap(document), ['myApp']);
});

Заголовок карты идет нормально, но переменная привязки также отображается внутри карты.

введите здесь описание изображения

Я просматриваю HTML-код в браузере, я вижу, что бумажный материал добавляется дважды, а второй показывает скобки как есть.

введите здесь описание изображения

Любая помощь высоко ценится. Спасибо.


person j1s    schedule 10.09.2015    source источник


Ответы (1)


Скорее всего, Angular загружен неправильно; поэтому он не срабатывает для вычисления выражений в фигурных скобках. Разместите всю HTML-страницу.

person Mike Feltman    schedule 10.09.2015
comment
Я обновил вопрос. Заголовок работает нормально, он отображает желаемое значение. Я не уверен, что мне не хватает. - person j1s; 10.09.2015
comment
Эта проблема только в Google Chrome, в IE-edge и Firefox все работает нормально. - person j1s; 10.09.2015
comment
Я не вижу ничего плохого в коде, но судя по описанному вами поведению, похоже, что Chrome компилирует его не так, как другие браузеры. Я думаю, что вы, вероятно, уже проверили отладчик на наличие ошибок, но если нет, я бы, очевидно, предложил это. Кроме того, просто для улыбки, я бы попробовал добавить точку с запятой в конце этой строки: ngHeading: '=heading' - person Mike Feltman; 10.09.2015