angularJS 1.5嵌套組件

我試圖建立一個父視圖（與控制器），其具有angularjs組件。父視圖通過雙向綁定（這是Web服務的結果，因此數據是JSON對象）將數據傳遞給組件。部分數據再次從組件傳遞到另一個嵌套組件。現在，當我由TextField改變在嵌套組件中的數據時，發生以下情況除外： angular.js：13424錯誤：[$編譯：nonassign]表達的指令「catAuswertungsparameterBearbeitung」用於屬性「未定義」「attributDetailDto」非-assignable！元器件的angularJS 1.5嵌套組件

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

JS嵌套組件貓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嵌套組件的

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

你有什麼想法嗎？非常感謝:)

來源

2016-06-09 fuechsle

哦，讓你不由自主的時候開始使用的模式是這樣

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

，以避免混淆因爲我完全沒有調用第一個組件。這並沒有肯定的工作：

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

由於角度也劃分駝峯屬性：

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

對不起削弱你的時間

來源

2016-06-09 16:30:22 fuechsle

在Angular 1.5中使用bindings時，您可以聲明綁定參數爲可選項，如下所示：wert: '=?'。這樣，使用catAuswertungsparameterBearbeitung組件將不會強制使用其所有綁定屬性。

來源

2016-06-09 08:10:22 AranS

這樣我實際上可以在textfeld鍵入一些內容沒有例外，但attributDetailDto.bezeichnung沒有更新。 – fuechsle

一個小建議，使用$符號

來源

2016-06-09 08:25:36 elasticrash

'$ ctrl'是從角度1.5開始給予控制器的默認名稱，我沒有看到使用它的問題。 – AranS

沒有問題，但隨着組件開始深入嵌套，可能會產生混淆，因此最好使用不同的名稱，以便更好地跟蹤綁定 – elasticrash

angularJS 1.5嵌套組件

回答

相關問題