AngularJS：使用現有控制器將數據傳遞給指令

Question

我將嘗試概述我要解決的問題：

在我網站的頁面上，我加載了數據集。 該數據需要組織成網格。 路由到頁面時，將解析數據，並且可以在全局頁面控制器中對其進行訪問。

對於網格，我正在嘗試制定一條指令，該指令負責正確放置數據項（根據數據通過的某些規則）。

我正在考慮在主頁中使用類似這樣的東西：

<data-grid demoData="dataset"></data-grid>

然后，我將分配一個具有所有邏輯的現有控制器，以正確的方式將數據排序到dataGrid指令。 現在，數據網格的模板將如下所示：

<div class="grid"><data-item ng-repeat="item in data-items"></data-item></div>

目前，我堅持使用此設置，但似乎無法將數據傳遞給dataGrid指令。 誰能給我展示一個理想的設置/如何處理此類數據的示例？

目前，我的網格指令如下所示：

cardGrid.directive('cardGrid', function(){
    return {
        restrict: 'E',
        templateUrl: 'views/partials/cardGrid.html',
        replace:true,
        controller: 'gridCtrl',
        scope: {
           demoData: '='
        }
    };
});

但我似乎無法在gridCtrl中訪問數據。 還是應該使用鏈接功能或編譯功能？

Answer 1

如果要檢索“ demoData”屬性中的數據集，則肯定需要使用鏈接功能：

cardGrid.directive('cardGrid', function(){
return {
    restrict: 'E',
    templateUrl: 'views/partials/cardGrid.html',
    replace:true,
    scope: {
      demoData: '='
    },
    link : function(scope, element, attrs) {
       console.info(scope.demoData);
    }
};
});

controller選項是控制器的一種特殊類型：指令控制器。此控制器僅在該指令的上下文中定義（並且可以注入其他指令中），但這可能不是您想要的。

編輯：回復您的評論，如果您希望縮短鏈接功能的大小，則可以使用控制器選項。 看到這個例子： https : //github.com/angular-ui/bootstrap/blob/master/src/accordion/accordion.js