Передача объекта и службы JSON компоненту через привязку

Question

Я пытаюсь создать компонент, который по сути является «списком CRUD». В верхней части компонента есть форма. Под этой формой находится список существующих объектов.

Например, у вас может быть форма для создания автомобиля, у вас есть два поля «имя автомобиля», «модель автомобиля». Под этой формой у вас есть список уже созданных автомобилей.

Я создаю общий компонент, который использует модель данных для отображения полей и списка. Модель данных выглядит следующим образом:

ctrl.dataModel =  {
            "fields" : [
            {"fieldName":"name", "fieldDescription":"Nom", "fieldType":"boolean"},
            {"fieldName":"description", "fieldDescription":"Description de l'application", "fieldType":"boolean"}
        ],
        "dataName":"Applications"
};

Компонент работает хорошо, когда я устанавливаю вручную модель данных и данные. Теперь я могу использовать этот тег в фрагментах HTML:

<crudlist></crudlist>

Я хочу "передать" модель данных в этот компонент crudlist, поэтому я сделал это обязательное объявление:

angular.
module('CrudlistModule').   
component('crudlist', { 
bindings: { 
    datamodel:"=",  
},

templateUrl: 'modules/crudlist/crudlist.template.html', 
controller: [crudlistController]
}
);

Но когда я пытаюсь внедрить что-либо в модель данных, используя этот код:

<crudlist datamodel="ANYTHINGHERE"/></crudlist>

похоже, что в контроллере не определена модель данных. Я использовал простой "console.log (" ... ")" для его отображения.

Чтобы увидеть, что определено в контроллере, я сделал это: "console.log (ctrl);" и никогда не вижу никакой модели данных любого типа.

Вы можете найти все файлы здесь: http://plnkr.co/edit/6x8b2IC2YAvZJG0TVcDl

Большое спасибо, если вы можете мне помочь!

Answer 1

Просто смотрим быстро:

• компонент определяет контроллер как var ctrl = this;но для компонента по умолчанию используется $ ctrl, поэтому вам нужно либо добавить controllerAs: 'ctrl', либо изменить ctrl на $ ctrl.

• определяет controllerAs: 'ctrl', нов вашем шаблоне вы используете $ ctrl.

• Вы также не включаете CrudListModule в зависимости модуля приложения.

Я не уверен, есть ли какие-либо другие проблемы,но эти две вещи выпрыгнули при взгляде.Как только вы получите все в $ ctrl или ctrl, вы будете немного более настроены, вы, вероятно, также захотите включить index.html и собрать все это вместе, чтобы вы могли видеть это в действии.