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

时间:2014-10-20 09:59:27

标签: angularjs

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

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

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

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