0

На основании комментария another question from me Я попытался создать директиву для сокращения моего кода. Вот что я получил:Двухсторонняя привязка модели в директиве не работает

Директиву (. Очень мало для тестирования Позже будет больше элементов):

BebuApp.directive('inputText', function(){ 
    return { 
     restrict: 'E', 
     scope: { 
      model: '=' 
     }, 
     template: '<input type="text" ng-model="model" />' 
    } 
}); 

Состояние:

.state('app', { 
      abstract: true, 
      url: '', 
      templateUrl: 'layout.html', 
      resolve: { 
       authorize: function ($http) { 
        return $http.post(API.URL_PING); 
       } 
      } 
     }) 
.state('app.application-detail', { 
      url: "/bewerbungen/{id}", 
      templateUrl: "views/application-detail/application-detail.html", 
      data: {pageTitle: 'Meine Bewerbungen', pageSubTitle: ''}, 
      controller: "ApplicationDetailController", 
      resolve: { 
       prm: function ($http, $stateParams) { 
        // $http returns a promise for the url data 
        return $http.get(API.URL_JOBAPPLICATION_GET_DETAILS + "/" + $stateParams.id); 
       } 
      } 
     }) 

Контроллер:

'use strict'; 

BebuApp.controller('ApplicationDetailController', function($rootScope, $scope, $http, $stateParams, API, prm) { 
    $scope.jobApplication = prm.data; 
    console.log(prm); 

    $scope.$on('$viewContentLoaded', function() { 
     // initialize core components 
     App.initAjax();  
    }); 
}); 

шаблона/Просмотр:

<div class="margin-top-10"> 
{{ jobApplication }} 
    <input-text model="jobApplication.description"></input-text> 

</div> 

Когда страница загружена, я могу видеть правильную модель (вывод {{jobApplication}}), но поле ввода пуст. Мне нужна нормальная двусторонняя привязка. Когда модель изменяется в сфере действия, она также должна изменяться в директиве и наоборот. Насколько я понимаю, модель извлекается функцией callback/function в состоянии, поэтому она должна быть «там», когда шаблон компилируется.

Где моя проблема?

+0

try ngModel вместо модели в вашей области определения директивы 'scope: {ngModel: '='}' –

+2

Не могли бы вы добавить вывод '{{jobApplication}}' к вашему вопросу? – AWolf

+1

Ниже приведена уменьшенная версия вашего кода, которая включает все, что нам нужно, за исключением вывода '{{jobApplication}}'. Нам нужно знать формат и данные объекта json, чтобы иметь возможность диагностировать проблему. http://plnkr.co/edit/LA45iEiIh4vBPFyOxrSB?p=info – ps2goat

ответ

1

Я нашел проблему после более близкого взгляда на модель (благодаря комментариям!). Фактически модель, которую я получил от моего бэкэнда, была сборкой только с одной записью. Выглядело это так:

[{id:"xxx", description:"test".....}] 

Конечно, это должно выглядеть следующим образом:

{id:"xxx", description:"test"...} 

После исправления этой глупой ошибки, все работает отлично!

Смежные вопросы