angularJS 1.5 嵌套组件

Question

我正在尝试构建一个具有 angularjs 组件的父视图（带有控制器）。父视图通过两种方式绑定将数据传递给组件（它是 Web 服务的结果，因此数据是一个 JSON 对象）。部分数据再次从组件传递到另一个嵌套组件。现在，当我通过文本字段更改嵌套组件中的数据时，会发生以下异常： angular.js:13424 错误：[$compile:nonassign] 与指令 'catAuswertungsparameterBearbeitung' 一起使用的属性 'attributDetailDto' 中的表达式 'undefined' 不可赋值！

组件的JS

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

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

HTML 的组件

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

嵌套组件cat-textfeld的JS

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

    }
});

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

HTML 嵌套组件

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

你有什么想法吗？非常感谢:)

Answer 1

在 Angular 1.5 中使用 bindings 时，您可以将绑定参数声明为可选，如下所示：wert: '=?'。这样，使用 catAuswertungsparameterBearbeitung 组件将不会强制使用其所有绑定属性。

Answer 2

一个小建议，开始使用这样的模式

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

然后

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

避免在使用 $ 符号时混淆

Answer 3

哦，伙计，你帮不了我，因为我在调用第一个组件时完全失败了。这肯定行不通：

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

因为angular也分驼峰属性：

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

抱歉耽误了您的时间

angularJS 1.5 嵌套组件

angularJS 1.5 nested components

binding

components

nested

angularjs