Angular component two way binding to object with http

Question

I have a scope object named 'formData'.

In my page, the user chooses a dataSource and with http provider I store the result to formData.

 $http.get($scope.options.dataSource.transport.read(id))
 .success(function (data, status, headers, config) {
     $scope.formData = data.value[0];
 })
 .error(function (data, status, header, config) {
 });

Then in my html I want to use another component passing the formData I retrieve from the http request.

<input-text field="Code" caption="Code" dataitem="formData"></input-text>

In input-text component i have

var inputText = {
    templateUrl: 'Input-text.tml.html',
    bindings: {
        field: '@',
        caption: '@',
        dataitem: '='
    },
    controller: function ($scope) {
        $scope.field = this.field;
        $scope.caption = this.caption;
        $scope.dataitem = this.dataitem;
    }
}
inputText.$inject = ['$scope'];

And in Input-text.tml.html

{{dataitem}}

But this doesn't work, seems it's not working as two way binding, this is: When formData changes, the component doesn't change the dataitem value.

dfsq · Accepted Answer · 2016-12-12 12:35:13Z

1

What happens is that formData is not available initially, and component gets undefined as dataitem binding. In controller you make assignment $scope.dataitem = this.dataitem; which results in $scope.dataitem being undefined. Later when http request resolves and formData becomes an object (array, whatever) it however is not going to update $scope.dataitem because there is not connection between those references. On the other hand, this.dataitem updates automatically.

Don't reassign dataitem to scope property, you don't need it:

controller: function () {
    // use this.dataitem directly
}

Drop $scope and use dataitem bound to controller. In template it will become {{ $ctrl.dataitem.whatever }}.

edited Dec 12, 2016 at 12:35

answered Dec 12, 2016 at 12:28

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

GomuGomuNoRocket Over a year ago

I dont understand what you mean, i try without controller but still doesnt work. I is two ways bindings should update value when http result comes

dfsq Over a year ago

Sure, this.dataitem updates without issue. So use dataitem bound to controller (this.dataitem), don't reassign to $scope.dataitem, because this will not update. I added explanation in the answer.

GomuGomuNoRocket Over a year ago

ok i get it, this.dataitem update automatically but $scope.dataitem not...however how can display in my html dataitem? i tried without created $scope in my html like {{dataitem}} but still not work

dfsq Over a year ago

There is no reference between $scope.dataitem and this.dataitem. Initial assignment $scope.dataitem = this.dataitem won't be reassigned automatically later. That's why you need to use this.dataitem which is always up to date.

GomuGomuNoRocket Over a year ago

i tried in controller to watch this dataItem with watch. $scope.$watch('dataitem', function () { console.log(this.dataitem) }, true); but doesnt work, do you know why?

Collectives™ on Stack Overflow

Angular component two way binding to object with http

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related