ms-card 无法处理数据答案

【问题标题】：ms-card not working with datams-card 无法处理数据
【发布时间】：2017-10-25 04:23:38
【问题描述】：

我正在尝试将数据放入模板中，但它不起作用，我可以使用 vm.maquinas 和 maquina 接收 HTML 格式的数据，但我无法通过 ng-model 将其发送到 TEMPLATE。

没有找到很多关于ms-cards的信息

模块

angular
    .module('app.tabelas.entidades.recursos.painel', [])
    .config(config);

/** @ngInject */
function config($stateProvider,$translatePartialLoaderProvider, msApiProvider, msNavigationServiceProvider)
{
    $stateProvider.state('app.painel-recursos', {
        url  : '/entidades/recursos/painel',
        views: {
            'content@app': {
                templateUrl: 'app/main/tabelas/entidades/recursosEntidades/views/painelRecursos/painelRecursos.html',
                 controller : 'maquinasController as vm'
            }
        },
        resolve  : {
            MaquinasData: function (msApi)
            {
                return msApi.resolve('maquinas.lista@get');
            }
        },
        bodyClass: 'painel-recurso'
    });

    // Translation
    $translatePartialLoaderProvider.addPart('app/main/tabelas/entidades/recursosEntidades/views/painelRecursos');
    // Api
    msApiProvider.register('maquinas.lista', ['app/data/tables/maquinas.json']);

    msNavigationServiceProvider.saveItem('tabelas.entidades.recursos', {
            title: 'Recursos',
            icon : 'icon-account',
            weight: 2
    });


     msNavigationServiceProvider.saveItem('tabelas.entidades.recursos.painel', {
            title: 'Painel de Maquinas',
            icon : 'icon-account-multiple',
            state: 'app.painel-recursos',
            weight: 2
    });
}

控制器

angular
        .module('app.tabelas.entidades.recursos.painel')
        .controller('maquinasController', maquinasController);

    /** @ngInject */
    function maquinasController(MaquinasData)
    {
        var vm = this;
        // Data

        vm.maquinas = angular.copy(MaquinasData.data);
        // Methods

        //////////
    }

HTML

<div id="price-tables" class="page-layout simple fullwidth doc-page">
    <div class="header md-accent-bg" layout="row" layout-align="space-between">
        <div layout="column" layout-align="center start">
            <div class="title"><label translate="MACHINE.TITLE_MACHINE">Title</label></div>
        </div>
    </div>
    <div class="content">
        <div class="price-tables" flex layout="row" layout-wrap>
            <div class="price-table style-1 md-whiteframe-2dp" layout="column" ng-repeat="maquina in vm.maquinas">
                <ms-card template="'app/main/modulos/planeamento/directives/cardMaquinas/templateMaquinas.html'" ng-model="vm.maquinas"></ms-card>
            </div>
        </div>
    </div>
</div>

模板

                <div class="package-type md-primary-bg" layout="column" layout-align="space-between center" style="background-color:{{maquina.color}};" >
                <span class="md-display-1">{{card.name}}</span>
                <span class="md-subhead">{{vm.card.name}}</span>
            </div>
            <div class="price" layout="row">
                <div layout="column" class="column-padding">
                    <div class="md-title" translate="MACHINE.MARKING"> Marcação </div>
                    <div class="period">{{maquina.marcacao}}</div>
                </div>
                <div layout="column" class="column-padding">
                    <div class="md-title" translate="MACHINE.PARTS"> Peças </div>
                    <div class="period">{{maquina.pecas}}</div>
                </div>
                <div layout="column" class="column-padding">
                    <div class="md-title" translate="MACHINE.MATERIAL"> Material </div>
                    <div class="period">{{maquina.material}}</div>
                </div>
            </div>
            <md-divider></md-divider>
            <div  layout="row">
                <div class="terms" layout="column">
                    <div class="term"><span class="text-bold" translate="MACHINE.NEXT"> Proxima marcação: </span> </div>
                    <div class="term"><span class="text-bold" ></span> {{maquina.proximaMarcacaoEmpresa1}}</div>
                    <div class="term"><span class="text-bold"></span> {{maquina.proximaMarcacaoEmpresa2}} </div>
                </div>
                <div class="terms" payout="column">
                    <div class="term"><span class="text-bold" translate="MACHINE.DATE"> Data e hora:</span> </div>
                    <div class="term"><span class="text-bold"></span>{{maquina.dataUm}}</div>
                    <div class="term"><span class="text-bold"></span>{{maquina.dataDois}}</div>
                </div>
            </div>

【问题讨论】：

标签： javascript html angularjs frameworks angular-material

【解决方案1】：

最后，我发现了问题所在。需要在模板上使用“卡片”。您不能将“卡”更改为另一个名称（我认为）。

考虑以下对象：

vm.cardModel = {

title      : 'My Card',

description: 'My card description'

}

它将在模板文件中作为：

卡片 = {

title      : 'My Card',
description: 'My card description'

} 字体：http://fuse-angular-material.withinpixels.com/components/custom-directives/ms-card

【讨论】：