Question

我有一个带有动态模板的指令，现在我希望指令能够使用不同的控制器。是否可以动态地将控制器分配给指令？如果可能，是否会将相同的“ctrlr”传递给link函数？

.directive('myDirective',['$compile',function($compile){
    return {
        restrict: 'AE',
        replace: true,
        transclude: true,
        scope: {},
        templateUrl: function(el,attrs){
            return (angular.isDefined(attrs.template)) ? attrs.template : '/tmpls/default';
        },
        link : function(scope,el,attrs,ctrlr,transFn){
            [... Do Stuff Here ...]
        },
        controller: [ DYNAMIC CONTROLLER ASSIGNMENT?? ]
    };
}]);

Answer 1

虽然我在官方API中没有找到相应的文档，但您可以通过使用“name”属性并提供“controller”属性来动态传递您要使用的控制器的名称。一个值，它使用您用于隔离范围的类似语法。

使用示例代码，假设一个名为“myController”的控制器：

HTML：

<my-directive ctrlr="myController"></my-directive>

JS：

.directive('myDirective',['$compile',function($compile){
    return {
        restrict: 'AE',
        replace: true,
        transclude: true,
        scope: {},
        templateUrl: function(el,attrs){
            return (angular.isDefined(attrs.template)) ? attrs.template : '/tmpls/default';
        },
        link : function(scope,el,attrs,ctrlr,transFn){
            [... Do Stuff Here ...]
        },
        controller: '@',
        name: 'ctrlr'
    };
}]);

Answer 2

这是如何完成的：

在您的指令元素中，您只需要一个属性，可以访问控制器的名称：

<card-dealer ng-repeat="card in cards" card="card"></card-dealer>

在我的情况下，我的卡属性包含一个具有名称属性的卡片对象。

在指令中，将隔离范围设置为：

scope: { card: '=' }

将卡对象隔离并插入指令范围。然后，将指令模板设置为：

template: '<div ng-include="getTemplateUrl()"></div>'

这指向指令的控制器以获取名为getTemplateUrl的函数，并允许您动态设置templateUrl。

在指令控制器中，getTemplateUrl函数如下所示：

controller: ['$scope', '$attrs', function ($scope, $attrs) {
  $scope.getTemplateUrl = function () { 
    return '/View/Card?cardName=' + $scope.card.name;
  };
}]

我有一个mvc控制器，它链接正确的.cshtml文件，并在命中此路由时处理安全性，但这也适用于常规的角度路由。

在.cshtml / html文件中，只需输入

即可设置动态控制器

<div ng-controller="CardContactController"></div>

作为根元素。每个模板的控制器都不同。这将创建一个控制器层次结构，允许您将一般逻辑应用于所有卡，然后为每个卡应用特定逻辑。我仍然需要弄清楚我将如何处理我的服务，但这种方法允许您使用基于控制器名称的ng-repeat为指令创建动态templateUrl和动态控制器。这是完成此功能的一种非常简洁的方式，它是完全独立的。

在AngularJS指令中定义动态控制器？

2 个答案: