What could be the reason for one AngularJS component displaying the ng-model value correctly while the other one fails to do so?

Question

What could be the reason for one AngularJS component displaying the ng-model value correctly while the other one fails to do so?

I am currently working on creating a set of dynamic components that can be imported into a main component. It is much more convenient to nest components inside one another when I can pass all objects into a single binding instead of creating multiple bindings for each object being passed. To demonstrate what I am trying to achieve, I have set up a plunkr. My goal is to pass an object from a parent component into a child component's ng-model without the need for a separate binding.

I am wondering if this is possible and if anyone can provide suggestions or explanations as to why the nested component only updates the model locally and not in the entire view?

In essence, I would like the cNestedComponent to function in the same manner as the cDirectComponent, where the databinding updates from both inside and outside of the component's template.

http://plnkr.co/edit/vusx9rm1DnkbBlNBGyZG?p=preview

MARKUP:

<h1> Data Comment => {{ data.comment }} </h1>
<c-direct-input plplaceholder="direct component" plmodel="data.comment" pltype="text"></c-direct-input>
<c-nested-input input-bindings="{type: 'text', model: 'data.comment', placeholder: 'nested component'}"></c-nested-input>

COMPONENTS:

app.component('cNestedInput', {
  template: '\
    <h2> Nested Component </h2>\
    <p style="display: block;"> {{ $ctrl.inputBindings.model }} </p>\
    <input type="{{ $ctrl.inputBindings.type }}" placeholder="{{$ctrl.inputBindings.placeholder}}" ng-model="$ctrl.inputBindings.model" />\
  ',
  bindings: {
    inputBindings: '='
  },
  controller: function($scope) {}
});

app.component('cDirectInput', {
  template: '\
    <h2> Direct Component </h2>\
    <p style="display: block;"> {{ $ctrl.plmodel }} </p>\
    <input type="{{ $ctrl.pltype }}" placeholder="{{ $ctrl.plplaceholder }}" ng-model="$ctrl.plmodel" />\
  ',
  bindings: {
    plplaceholder: '@',
    plmodel: '=',
    pltype: '@'
  },
  controller: function($scope) {}
});

========================================================

UPDATE

Following feedback from user Julien Tassin, I have updated the plunker to be cleaner and to better demonstrate what I am aiming for:

https://plnkr.co/edit/cvYAdB?p=preview

The Direct Component examples show a clear path to achieving my goal, but I prefer not having to list out every single binding as components get nested. For instance:

<c-nested-input input-bindings="$ctrl.input.inputBindings"/>

is much simpler to type out than having to write out this

<c-direct-input input-placeholder="{{$ctrl.inputPlaceholder}}" input-type="{{$ctrl.inputType}}" input-model="$ctrl.inputModel"/>\

each time I want to nest the input component within a parent component.

This update should provide further clarification on what I am looking to achieve.

javascript angularjs angular-ngmodel angular-components

Answer 1

Answer №1

There are several issues causing your example to not work correctly:

First issue: the non-assignable property

An issue arises with a "non-assignable" property. When you declare

<c-nested-input input-bindings="{type: 'text', model: 'data.comment', placeholder: 'nested component'}></c-nested-input>

, you create a non-assignable property

{type: 'text', model: 'data.comment', placeholder: 'nested component'}

(there is also a mistake in 'data.comment' that should be corrected as data.comment). Attempting to assign a value to it in ngModel will fail because non-assignable expressions cannot be assigned to, even non-assignable expression properties.

The solution is to set an assignable object inputBindings in your main controller and pass it to your component.

Second issue: the data.comment reference

Another issue arises when you try:

$scope.data = {}
$scope.inputBindings = {
  type: 'text',
  model: $scope.data.comment,
  placeholder: 'nested component'
}

And pass it to your nested component:

<c-nested-input input-bindings="inputBindings"></c-nested-input>

It will not work as expected because when your nested component modifies inputBindings.model, it will not refer to the same values as data.comment. The = binding refers to inputBindings, not its properties.

This issue cannot be avoided.

The solution is to remove data.comment and work as follows:

MARKUP:

<body ng-controller="MainCtrl">
  <h1> Data Comment => {{ inputBindings.model }} </h1>
  <hr/>
  <c-direct-input plplaceholder="direct component" plmodel="inputBindings.model" pltype="text"></c-direct-input>
  <c-nested-input input-bindings="inputBindings"></c-nested-input>
</body>

JS:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.inputBindings = {
    type: 'text',
    placeholder: 'nested component'
  }
});

app.component('cNestedInput', {
  template: '\
    <h2> Nested Component </h2>\
    <p style="display: block;"> {{ $ctrl.data.comment }} </p>\
    <input type="{{ $ctrl.inputBindings.type }}" placeholder="{{ $ctrl.inputBindings.placeholder}}" ng-model="$ctrl.inputBindings.model" />\
  ',
  bindings: {
    inputBindings: '='
  },
  controller: function() {}
});

app.component('cDirectInput', {
  template: '\
    <h2> Direct Component </h2>\
    <p style="display: block;"> {{ $ctrl.plmodel }} </p>\
    <input type="{{ $ctrl.pltype }}" placeholder="{{ $ctrl.plplaceholder }}" ng-model="$ctrl.plmodel" />\
  ',
  bindings: {
    plplaceholder: '@',
    plmodel: '=',
    pltype: '@'
  },
  controller: function() {

  }
});

The example can be found in the plunker.

My advice

I suggest a cleaner way to create your component using an hybrid approach:

Something like:

JS:

app.component('cHybridInput', {
  template: '\
    <h2> Nested Component </h2>\
    <p style="display: block;"> {{ $ctrl.data.comment }} </p>\
    <input type="{{ $ctrl.options.type }}" placeholder="{{ $ctrl.options.placeholder}}" ng-model="$ctrl.ngModel" />\
  ',
  bindings: {
    ngModel: '=',
    options: '<'
  },
  controller: function() {}
});

HTML:

<c-hybrid-input ng-model="inputBindings.model" options="inputBindings"></c-hybrid-input>

Answer 2

There are several issues causing your example to not work correctly:

First issue: the non-assignable property

An issue arises with a "non-assignable" property. When you declare

<c-nested-input input-bindings="{type: 'text', model: 'data.comment', placeholder: 'nested component'}></c-nested-input>

, you create a non-assignable property

{type: 'text', model: 'data.comment', placeholder: 'nested component'}

(there is also a mistake in 'data.comment' that should be corrected as data.comment). Attempting to assign a value to it in ngModel will fail because non-assignable expressions cannot be assigned to, even non-assignable expression properties.

The solution is to set an assignable object inputBindings in your main controller and pass it to your component.

Second issue: the data.comment reference

Another issue arises when you try:

$scope.data = {}
$scope.inputBindings = {
  type: 'text',
  model: $scope.data.comment,
  placeholder: 'nested component'
}

And pass it to your nested component:

<c-nested-input input-bindings="inputBindings"></c-nested-input>

It will not work as expected because when your nested component modifies inputBindings.model, it will not refer to the same values as data.comment. The = binding refers to inputBindings, not its properties.

This issue cannot be avoided.

The solution is to remove data.comment and work as follows:

MARKUP:

<body ng-controller="MainCtrl">
  <h1> Data Comment => {{ inputBindings.model }} </h1>
  <hr/>
  <c-direct-input plplaceholder="direct component" plmodel="inputBindings.model" pltype="text"></c-direct-input>
  <c-nested-input input-bindings="inputBindings"></c-nested-input>
</body>

JS:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.inputBindings = {
    type: 'text',
    placeholder: 'nested component'
  }
});

app.component('cNestedInput', {
  template: '\
    <h2> Nested Component </h2>\
    <p style="display: block;"> {{ $ctrl.data.comment }} </p>\
    <input type="{{ $ctrl.inputBindings.type }}" placeholder="{{ $ctrl.inputBindings.placeholder}}" ng-model="$ctrl.inputBindings.model" />\
  ',
  bindings: {
    inputBindings: '='
  },
  controller: function() {}
});

app.component('cDirectInput', {
  template: '\
    <h2> Direct Component </h2>\
    <p style="display: block;"> {{ $ctrl.plmodel }} </p>\
    <input type="{{ $ctrl.pltype }}" placeholder="{{ $ctrl.plplaceholder }}" ng-model="$ctrl.plmodel" />\
  ',
  bindings: {
    plplaceholder: '@',
    plmodel: '=',
    pltype: '@'
  },
  controller: function() {

  }
});

The example can be found in the plunker.

My advice

I suggest a cleaner way to create your component using an hybrid approach:

Something like:

JS:

app.component('cHybridInput', {
  template: '\
    <h2> Nested Component </h2>\
    <p style="display: block;"> {{ $ctrl.data.comment }} </p>\
    <input type="{{ $ctrl.options.type }}" placeholder="{{ $ctrl.options.placeholder}}" ng-model="$ctrl.ngModel" />\
  ',
  bindings: {
    ngModel: '=',
    options: '<'
  },
  controller: function() {}
});

HTML:

<c-hybrid-input ng-model="inputBindings.model" options="inputBindings"></c-hybrid-input>

What could be the reason for one AngularJS component displaying the ng-model value correctly while the other one fails to do so?

Answer №1

First issue: the non-assignable property

Second issue: the data.comment reference

My advice

Similar questions

What could be the reason for v-model not functioning properly?

Refreshing the Angular resource under observation

Encountering issues while trying to run npm install for an Angular 7 application, specifically receiving an error stating: "Module not found: @angular-devkit/build-ng-packagr." This error is hindering

Custom AngularJS directive: dynamic template rendering using scope value (ng-bind-html)

JavaScript can be used to create a fullscreen experience without any toolbars, scrollbars, and the like, without having

Leveraging global variables within Vuex state management strategy

designating the initial item as the chosen selection for the hash category

Looking for a way to detect changes in a select menu using Angular?

Adjust the color of an SVG icon depending on its 'liked' status

Vector indicating the direction of a rotation in Three.js

Utilizing a PHP-scripted multidimensional array in an AJAX success function

Refresh the Content of a Page Using AJAX by Forcing a Full Reload

Tips for assigning custom values using CSS and jQuery for a standalone look

Ways to retrieve and update the state of a reactjs component

Guide on implementing ng-change in a select dropdown for dynamically populating data

What is the best way to nest _app.js within several providers?

"Adding a grid panel to the final node of a tree-grid in extjs: A step-by-step guide

How can I stop iOS mobile browsers from automatically opening apps when I click on links?

Exploring the behavior of Object.assign in for loops and forEach loops

Guide to using Angular $resource to pass query parameter array