Question

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

组件的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

哦，伙计，你无法帮助我，因为我完全没有打电话给第一个组件。这肯定不起作用：

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

因为angular也会分割camel-case属性：

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

抱歉打算消磨时间

Answer 2

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

Answer 3

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

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">

以避免在使用$符号时出现混淆

angularJS 1.5嵌套组件

3 个答案: