angularJS 1.5 嵌套组件

Posted 2023-02-23

【中文标题】angularJS 1.5 嵌套组件

【英文标题】：angularJS 1.5 nested components

【发布时间】：2016-10-09 18:14:57

【问题描述】：

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

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

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

【参考方案1】：

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

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

因为angular也分驼峰属性：

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

抱歉耽误了您的时间

【参考方案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">

在使用 $ 符号时避免混淆

【讨论】：

$ctrl 是自 Angular 1.5 以来控制器的默认名称，我认为使用它没有问题。

没有问题，但随着组件开始深入嵌套，可能会出现混淆，因此最好使用不同的名称，以便更好地跟踪绑定

【参考方案3】：

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

【讨论】：

这样我实际上可以毫无例外地在文本字段中输入一些内容，但是 attributDetailDto.bezeichnung 没有更新。