CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scopeangular-ui-router
mcode
mcode

Reputation: 544

Two way binding of a model in a directive does not work

Based on a comment of another question from me I tried to create a directive to reduce my code. Here what I got:

Directive (very small for testing. Later it will be more elements):

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

State:

.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);
                }
            }
        })

Controller:

'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();    
    });
});

Template / View:

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

</div>

When the page is loaded I can see the correct model (output by {{jobApplication}}), but the input field is empty. I need a normal two way binding. When the model changes in the scope it should also change in the directive and vice versa. As far as I understand the model is retrieved by the resolve callback / function in the state, so it should be "there" when the template is compiled.

Where is my problem?

Upvotes: 0

Views: 73

Answers (1)

mcode
mcode

Reputation: 544

I found the problem after an closer look to the model (thanks to the comments!). In fact the model I received from my backend was a collection with just one entry. It looked like this:

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

Of course it must look like this:

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

After fixing this stupid mistake, everything works fine!

Upvotes: 1

Related Questions