AngularJs：「獨立」指令和外部數據依賴

首先我是一個有角度的新手，所以如果問題是微不足道的原諒我，但我試過谷歌和角度的文檔，但我找不到任何明確的例子，我的需要。我試圖建立一個「獨立的」指令模塊（複雜的用戶界面控制），我想它從可配置的服務/工廠/提供商消費數據。AngularJs：「獨立」指令和外部數據依賴

我有一個演示應用程序和我的真實應用程序，每個應該有它自己的dataProvider（即硬編碼和REST API，我猜相同的單元測試常見場景）。

這將是一個不同的數據提供程序對象設置到使用這個指令模塊考慮它可以具有多於一個的instace上相同的HTML如下面的例子從應用程序的每個指令的正確的方法：

<!DOCTYPE html> 
<html lang="en"> 
<body ng-app="demo" > 
    <my-directive id="first"></my-directive> 
    <my-directive id="second"></my-directive> 
</body> 
</html>

爲了更具體地考慮一個網格指令，該指令會有一個控制器來保持一些dinamically拒絕，處理事件或事件，如訂購，分頁等。但作爲一個UI控制它沒有數據檢索邏輯，它只需要一些尊重接口的對象，如「getRows」，「getPage」

我的問題面向我如何注入/配置我的指令的通用控制器內的dataProvider對象。

來源

2014-03-03 KidD

如果我正確理解你，這是你將如何做到這一點。

創建您的指令。此時，您可以通過scope屬性傳遞數據。 =符號將提供對當前控制器中的作用域變量的雙向綁定。

angular.module('UI-Control', []) 

.directive('myDirective', function() { 
    return { 
    restrict: 'A', 
    scope: { 
     data: '=myDirective' 
    }, 
    link: function(scope, elem, attr) { 
     console.log(data); 
    } 
    } 
});

然後創建您的控制器並創建一個您將傳入您的指令的範圍變量。確保注入獨立的指令模塊。

angular.module('testCtrl', ['UI-Control']) 

    .controller('testCtrl', function($scope) { 
    $scope.data1 = { 
     something: "Something 1", 
     somethingElse: "Something Else 1" 
    } 
    $scope.data2 = { 
     something: "Something 2", 
     somethingElse: "Something Else 2" 
    } 
    });

現在在你的HTML中，你可以通過傳入的數據實例化你的指令。

<body ng-app="demo" ng-controller="testCtrl"> 
    <my-directive="data1" id="first"></my-directive> 
    <my-directive="data2" id="second"></my-directive> 
</body>

來源

2014-03-03 15:29:57

也許我對於我的問題還不夠清楚。用你的方法，我想我必須爲使用UI控制模塊的每個應用程序編寫一個新的控制器，但是我的控制器必須是具有視圖邏輯和數據檢索訪問權限的控制器。 – KidD

好的，澄清一下，這就像插件那樣嗎？您希望能夠重複使用指令的位置，但是將自定義選項傳遞給了您的指令？這就是我所展示的，並且你的邏輯進入你的鏈接功能，或者你可以創建一個控制器讓指令在那裏執行。 –

AngularJs：「獨立」指令和外部數據依賴

回答

相關問題