AngularJS +1.5哪有父控制器將數據傳遞到組件控制器

我有這樣一個組成部分：AngularJS +1.5哪有父控制器將數據傳遞到組件控制器

Check Plunkr Example（更新，並與解決方案合作:)謝謝）

我-component.js聲明

(function() { 
    'use strict'; 
    angular 
    .module('app') 
    .component("myComponent", { 
     bindings: { obj: "=" }, 
     controller: "ComponentController", 
     controllerAs: "vm", 
     template: 
     '<section class="result"><h2>{{vm.title}}</2>' + 
     '<h3>Using the Parent Controller values</h3>' + 
     '<ul><li>{{ vm.obj.a }}</li><li>{{vm.obj.b}}</li></ul>' + 
     '<h3>Using the Children controller values:'+ 
     '<ul class="component-controller"><li>{{ vm.copiedObj.a }}</li><li>{{vm.copiedObj.b}}</li></ul>' + 
     '</section>' 
    }); 

    })();

我的組件控制器

(function() { 
    'use strict'; 
    angular 
    .module('app') 
    .controller('ComponentController', ComponentController); 

    function ComponentController() { 
    var vm = this; 

    vm.title = "I'm the Children controller" 

    vm.copiedObj = vm.obj; // This should store the myObj variable located in the MainController 
    } 

    })();

和一個父控制器

(function() { 
    'use strict'; 
    angular 
    .module('app', []); 
})(); 


// app.controller.js 
// /////////////////// 
(function() { 
    'use strict'; 
    angular 
    .module('app') 
    .controller('MainController', MainController); 

    function MainController() { 
    var vm = this; 

    vm.title = "I'm the Parent controller"; 

    vm.myObj = { 
     a: "I'm the first value", 
     b: "I'm the second value" 
    }; 

    } 
    })();

所以，如果我有一個像

<body ng-controller="MainController as vm"> 

    <h2>{{vm.title}}</h2> 

    <my-component obj="vm.myObj"></my-component> 

    </body>

重要的線，模板是在那裏我的obj = 「vm.myObj」吧？我有什麼錯的，因爲甚至沒有采取vm.title：S

我不想只是打印vm.myObj值到組件，我想從ParentController的vm.obj.value存儲在ComponentController中的可訪問&。

來源

2016-05-25 Héctor León

''應該可以工作.... – Claies

但它不會... –

好吧，您的示例實際上並未顯示您*使用你傳入的值，所以你的具體問題可能不是很明顯。 – Claies

我們使用組件的方式是使用綁定屬性。它是指令的簡化版本範圍和bindToController屬性組合。

在指令中，範圍屬性允許我們定義我們是否要繼承或隔離$範圍。隨着時間的推移，這種選擇已經被推斷爲明智的默認，幾乎總是讓我們的指示隔離範圍。並且，通過添加屬性，我們可以定義我們想要傳遞給隔離範圍的哪些屬性，並直接綁定到控制器。

在一個部件，與所述綁定屬性這種重複處理作爲默認$範圍總是隔離除去。

普通的例子：

// directive 
.directive("myDirective", function myDirective() { 
    return { 
     scope: {},    // isolate scope 
     bindToController: { 
      value: "="   // two-way binding 
     } 
    }; 
}); 

// component 
.component("myComponent", { 
    bindings: { 
     value: "="    // two-way binding 
    } 
});

詳細示例：

angular 
    .module("myApp") 
    .controller("MyController", function MyController() { 
     var vm = this; 

     vm.myObj = { 
      a: 1, 
      b: 2 
     }; 
    }) 
    .component("myComponent", { 
     bindings: { value: "=" }, 
     controller: "MyComponentController", 
     controllerAs: "vm", 
     template: "<ul><li>vm.value.a</li><li>vm.value.b</li></ul>" 
    });

在你的模板，你可以傳遞下來的數據，像這樣：

<div ng-controller="MyController as vm"> 
    <my-component value="vm.myObj"></my-component> 
</div>

至於解釋以上，d ata在默認情況下綁定到（component）控制器並且可以訪問。

請注意，我們使用雙向綁定在這裏。另外除了可用作爲版本1.5，並且是特定於組件是<符號其表示單向綁定。查看official documentation中的「基於組件的應用程序體系結構」部分以獲取更多信息。

來源

2016-05-25 15:48:12

感謝您的回答，但我沒有得到這個工作，我更新了鏈接到Plunkr樣本與我們的代碼合併後，但仍然失敗：S –

我創建了** [新] （http://plnkr.co/edit/Cd3lp6ve7gcQORcUQpJC?p=preview)**，因爲你的問題很多。我希望這可以幫助你更好地理解組件。乾杯! –

@DimitarRusev我們應該能夠通過簡單地將它們綁定到正確的值來訪問像「myObj」這樣的控制器屬性值？不需要嗎？ – Winnemucca

在上面的代碼中，第一個問題是組件沒有「綁定」屬性，而是它具有「綁定」屬性。
其次是通過「obj」屬性將父控制器的值傳遞給組件。

我已經糾正，並實現代碼按您的要求：

<div ng-controller="ParentController as vm"> 
<my-component obj="vm.obj"></my-component> 
</div> 

    .controller('ParentController', ParentController) 
    .component('myComponent', { 
     bindings: { 
     obj: '=' 
     }, 
     controller : function() { 

     }, 
controllerAs:'vm', 
     template: '<h1>Whatever <br>{{vm.obj.value}}<br>{{vm.obj.value2}}</h1>' 

    }); 

     function ParentController() { 
     var vm = this; 

     vm.obj = { 
      value : 1, 
      value2: 2 
     } 
     };

希望它會幫助你解決你的問題。

來源

2016-05-25 15:51:13

感謝您的回答，但我不知道我在哪裏發生了錯誤，請檢查我在plunkr上的回購:) –

兩個問題：1.將「MyComponentController」替換爲「ComponentController」2.在vm.objStoredInComponentController = obj中， obj沒有定義，所以首先定義var obj = {a：'Done !!!'};然後把上面的行3.你現在完成！ –

Omg感謝與控制器名稱的錯字，但我仍然沒有這樣做：S objStoredInComponentController應該等於從父母的變種MyObj –

AngularJS +1.5哪有父控制器將數據傳遞到組件控制器

回答

相關問題