angularJS 1.5 nested components

Question

I am trying to build a parent view (with a controller) that has a angularjs component. The parent view delivers the data to the component by two way binding (it is a result of an Web-Service, so the data is a JSON Object). A part of the data is again delivered from the component to another nested component. Now when I change the data in the nested component by a textfield, following exception occurs: angular.js:13424 Error: [$compile:nonassign] Expression 'undefined' in attribute 'attributDetailDto' used with directive 'catAuswertungsparameterBearbeitung' is non-assignable!

JS of Component

    angular.module('catApp').component('catAuswertungsparameterBearbeitung', {
    controller : CatAuswertungsparameterBearbeitungController,
    templateUrl : 'resources/js/konfiguration/auswertungsparameter/catAuswertungsparameterBearbeitung.html',
    bindings : {
    attributDetailDto : '='
    }
});

function CatAuswertungsparameterBearbeitungController($translate) {
    var ctrl = this;
}

HTML of component

...
<cat-textfeld min=1 max=50 wert="$ctrl.attributDetailDto.bezeichnung"></cat-textfeld>
...

JS of nested component cat-textfeld

angular.module('catApp').component('catTextfeld', {
    controller : MinMaxTextfeldController,
    templateUrl : 'resources/js/fwk/catTextfeld.html',
    bindings : {
    wert : '=',
    min : '@',
    max : '@'

    }
});

function MinMaxTextfeldController($translate) {
    var ctrl = this;

HTML of nested component

<input type="text" class="textfeld" name="textfeld" ng-model="$ctrl.wert">

Do you have any ideas? Many thanks :)

fuechsle · Accepted Answer · 2016-06-09 16:30:22Z

1

Oh man, you couldn't help me because I totally failed in calling the first component. This didn't work for sure:

<cat-auswertungsparameter-bearbeitung attributDetailDto="attributDetailDto"></cat-auswertungsparameter-bearbeitung>

Because angular also divides camel-case attributes:

<cat-auswertungsparameter-bearbeitung attribut-detail-dto="attributDetailDto"></cat-auswertungsparameter-bearbeitung>

sorry for sapping your time

answered Jun 9, 2016 at 16:30

fuechsle

2252 gold badges4 silver badges11 bronze badges

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

Comments

AranS · Accepted Answer · 2016-06-09 08:10:22Z

0

When using bindings in Angular 1.5, you are able to declare the binding parameteres as optional, like this: wert: '=?'. This way, using the catAuswertungsparameterBearbeitung component will not force using all of its bindings attributes.

answered Jun 9, 2016 at 8:10

AranS

1,91113 silver badges22 bronze badges

1 Comment

fuechsle Over a year ago

this way I can actually type something in the textfeld without an exception, but the attributDetailDto.bezeichnung isn't updated.

elasticrash · Accepted Answer · 2016-06-09 08:25:36Z

0

a small advice, start using a pattern like this

app.component("someComponent", {
    bindings: {
        something: '='
    },
    templateUrl: "app/templates/layer-list-component.html",
    controllerAs: "model",
    controller:  function () {
    var model = this;
   }
});

and then

<input type="text" class="textfeld" name="textfeld" ng-model="model.wert">

to avoid confusion when using the $ symbol

answered Jun 9, 2016 at 8:25

elasticrash

1,2311 gold badge13 silver badges32 bronze badges

2 Comments

AranS Over a year ago

$ctrl is a default name given to the controller since angular 1.5, I see no problem using it.

elasticrash Over a year ago

there is no problem but as components start to get deeply nested there might be a confusion so its better to have a different name so you can track bindings better

Collectives™ on Stack Overflow

angularJS 1.5 nested components

3 Answers 3

Comments

1 Comment

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Related