在指令中使用控制器的最佳方法

我試圖做一個指令，以便我可以在不同的頁面中重用視圖。讓我們把它叫做my-directive：在指令中使用控制器的最佳方法

app.directive("myDirective", function() { 
    . 
    . 
    . 
    templateUrl: reuse.html 
});

現在我想使用這個指令對page1.html和page2.html。

<div> 
    <my-directive></my-directive> 
</div>

我不知道我的假設是否正確，如此友好地驗證，反駁或提供更好的想法。我的問題是：

（1）假設我有這兩頁兩種不同的控制器，但使用相同的指令，我應該把控制器這樣：

<div ng-controller="Page1Ctrl"> 
    <my-directive></my-directive> 
</div>

和

<div ng-controller="Page2Ctrl"> 
    <my-directive></my-directive> 
</div>

（2）如果我將使用單個控制器來處理這兩個頁面，我應該如下：

（a）與（1）中所做的相同

或

（B）放在模板的HTML控制器，像這樣：

reuse.html

<div ng-controller="ReuseCtrl"> 
    . 
    . 
    . 
</div>

或

（c）中定義的指令，所述控制器：

app.directive("myDirective", function() { 
    . 
    . 
    . 
    templateUrl: reuse.html, 
    controller: function() { 
    . 
    . 
    . 
    }, 
    controllerAs: ReuseCtrl 
});

來源

2014-10-20 menorah84

指令應該是**上下文無關**，即在所有不應該依賴於父控制器。任何你想提供給指令的東西都應該通過'scope'參數傳入 – AlexFoxGill 2014-10-20 10:35:26

最好的辦法它是在指令中調用控制器。例如：

angular.module('directives', []).directive('directiveName', function() { 
     return { 
      restrict: 'AE', 
      templateUrl: 'views/myDirective.html', 
      controller: 'controllerNameCtrl' 
     } 
    })

來源

2014-10-20 10:11:10

如果是（1），情況如何？我想使用兩個不同的控制器？ – menorah84 2014-10-20 10:16:42

這是一個特殊情況，所以你可以直接調用控制器，如 – 2014-10-20 10:34:18

指令是行爲。如果你真的需要兩個不同的控制器，那麼創建兩個不同的指令。

但是，如果您只想要兩個不同的控制器以訪問它們的某些屬性（例如$scope.books），則最好將該參數傳遞給該指令。

例如：

app.directive('myDirective', function() { 
    return { 
     scope: { books: '=' }, 
     link: function(scope, elem, attrs) { 
      // use scope.books here 
     } 
    } 
}); 

<my-directive books="model.books"></my-directive>

來源

2014-10-20 10:38:33 AlexFoxGill

在指令中使用控制器的最佳方法

回答

相關問題