Question

我正在尝试制作一个指令，以便我可以在不同的页面中重用一个视图。让我们称之为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
});

Answer 1

最好的方法是在指令中调用控制器。例如：

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

Answer 2

指令是行为。如果你真的需要两个不同的控制器，那么创建两个不同的指令。

但是，如果您只想要两个不同的控制器来访问它们的某些属性（例如$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>

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

2 个答案: