материал angularjs не импортирует стили scss - PullRequest
Новая
       18

материал angularjs не импортирует стили scss

2 голосов
/ 21 марта 2019

Я работаю с материалом angularjs, в angularjs 1.7.0

Мне нужен множественный выбор с функцией автозаполнения, поэтому я использую фишки материала. Проблема в том, что стили не импортируются . Это код, который я использую:

модуль: 

import angular from 'angular';
import routing from '../../app.config';
import ngMaterial from 'angular-material';

export const HomeModule = angular.module('home-premium', [
    HeroHomePremiumModule,
    ngMaterial 
])
.component('homePremium', HomePremium)
.config(routing);

HTML-код 

<md-content class="md-padding" layout="column">
   <md-chips ng-model="$ctrl.selectedDestinies" md-autocomplete-snap
       md-transform-chip="$ctrl.transformChip($chip)"
       md-require-match="true"
       input-aria-label="Destinos">
       <md-autocomplete
          md-selected-item="$ctrl.selectedItem"
          md-search-text="$ctrl.searchText"
          md-items="item in $ctrl.querySearch($ctrl.searchText)"
          md-item-text="item.name"
          input-aria-describedby="autocompleteTitle"
          placeholder="Busca destinos">
            <span md-highlight-text="$ctrl.searchText">{{item.name}}</span>
        </md-autocomplete>
         <md-chip-template>
            <span>
              <strong>{{$chip.name}}</strong>
            </span>
          </md-chip-template>
      </md-chips>
</md-content>

и код JS: 

    import template from './search-by-destiny.html';
const bindings = {
    currentStep: '<',
    changeStep: '&'
};
class SearchByDestinyComponent {
    constructor(utilsService) {
        'ngInject';
        this.utilsService = utilsService;

        this.selectedDestinies = [];
        this.paxNumber = null;
        this.selectedMonths = [];

        this.searchText = null;
        this.destinies = [
            {
                'name': 'Brasil',
                'iata': 'BRS'
            },
            {
                'name': 'Cancún',
                'iata': 'CUN'
            },
            {
                'name': 'Cuba',
                'iata': 'CUB'
            },
            {
                'name': 'México',
                'iata': 'MXC'
            },
            {
                'name': 'España',
                'iata': 'SPN'
            }
        ];
        this.selectedDestinies = [];
        this.readonly = false;
        this.selectedItem = null;
    }

    /**
     * Return the proper object when the append is called.
     */
    transformChip(chip) {
        // If it is an object, it's already a known chip
        if (angular.isObject(chip)) {
            return chip;
        }

        // Otherwise, create a new one
        return { name: chip, iata: 'new' };
    }

    /**
     * Search for destinies.
     */
    querySearch(query) {
        var results = query ? this.destinies.filter(this.createFilterFor(query)) : [];
        return results;
    }

    /**
     * Create filter function for a query string
     */
    createFilterFor(query) {
        var lowercaseQuery = query.toLowerCase();

        return function filterFn(vegetable) {
            return (vegetable.name.toLowerCase().indexOf(lowercaseQuery) === 0) ||
                (vegetable.iata.toLowerCase().indexOf(lowercaseQuery) === 0);
        };

    }

    SearchByDestinyComponent.$inject = ['utilsService'];

    export const SearchByDestiny = {
        template,
        bindings,
        controller: SearchByDestinyComponent
    };

В кодовое перо это выглядит так хорошо выглядящие md-чипы

Вместо этого в моем приложении это выглядит так: битые md-чипы , даже не показывает выпадающий список.

...