31

说话很便宜,先显示我的代码:

HTML:

<div add-icons="IconsCtrl">
</div>

指示:

angular.module('attrDirective',[]).directive('addIcons', function($compile){
return {
    restrict : 'A',
    controller : "IconsCtrl"
    },
    link : function (scope, elem , attrs, ctrl) {
        var parentElem = $(elem);
        var icons = $compile("<i class='icon-plus' ng-click='add()'></i>)(scope);
        parentElem.find(".accordion-heading").append(icons);
    },
}

});

控制器:

function IconsCtrl($scope){
  $scope.add = function(){
    console.log("add");
  };
}

现在它可以工作了,当我单击加号图标时,浏览器控制台输出“添加”。

但我想动态地将控制器设置为指令,如下所示:

HTML:

<div add-icons="IconsOneCtrl">
</div>
<div add-icons="IconsTwoCtrl">
</div>

控制器:

function IconsOneCtrl($scope){
       $scope.add = function(){
        console.log("IconsOne add");
       };
    }

function IconsTwoCtrl($scope){
    $scope.add = function(){
        console.log("IconsTwo add");
    }
}

指令喜欢:

angular.module('attrDirective',[]).directive('addIcons', function($compile){
return {
    restrict : 'A',
    controller : dynamic set,depends on attrs.addIcons
    },
    link : function (scope, elem , attrs, ctrl) {
        var parentElem = $(elem);
        var icons = $compile("<i class='icon-plus' ng-click='add()'></i>)(scope);
        parentElem.find(".accordion-heading").append(icons);
    },
}
});

如何实现我的目标?感谢您的回答!

4

3 回答 3

58

现在可以使用 AngularJS。在指令中,您只需添加两个名为 controller, nameproperty 的新属性,并且isolate scope此处正是需要的。

指令中需要注意的重要事项

scope:{}, //isolate scope
controller : "@", // @ symbol
name:"controllerName", // controller names property points to controller.

为指令设置动态控制器的工作演示

HTML 标记:

<communicator controller-name="PhoneCtrl" ></communicator>
<communicator controller-name="LandlineCtrl" ></communicator>

角度控制器和指令:

var app = angular.module('myApp',[]).
directive('communicator', function(){
return {
    restrict : 'E',
    scope:{},
    controller : "@",
    name:"controllerName", 
    template:"<input type='text' ng-model='message'/><input type='button' value='Send Message' ng-click='sendMsg()'><br/>"          
  }   
}).
controller("PhoneCtrl",function($scope){
 $scope.sendMsg = function(){
     alert( $scope.message + " : sending message via Phone Ctrl");
    }
}).
controller("LandlineCtrl",function($scope){
    $scope.sendMsg = function(){
        alert( $scope.message + " : sending message via Land Line Ctrl ");
    }
})

您的情况下,您可以尝试以下代码片段。

工作演示

HTML 标记:

<div add-icons controller-name="IconsOneCtrl">
</div>
<div add-icons controller-name="IconsTwoCtrl">
</div>

角代码:

angular.module('myApp',[]).

directive('addIcons', function(){
return {
    restrict : 'A',
    scope:{},
    controller : "@",
    name:"controllerName",    
    template:'<input type="button" value="(+) plus" ng-click="add()">'
  }
}).
controller("IconsOneCtrl",function($scope){
     $scope.add = function(){
        alert("IconsOne add ");
      }
}).
controller("IconsTwoCtrl",function($scope){
     $scope.add = function(){
        alert("IconsTwo add ");
      }
});
于 2014-05-14T07:02:35.797 回答
1

这是这样做的:

在指令元素中,您只需要一个属性,它可以让您访问控制器的名称:在我的例子中,我的 card 属性包含一个具有 name 属性的 card 对象。在指令中,您将隔离范围设置为:

scope: { card: '=' } 

这将卡片对象隔离并插入到指令范围。然后将指令模板设置为:

template: '',

这会在指令的控制器中查找名为的函数getTemplateUrl,并允许您templateUrl动态设置。在指令控制器中,getTemplateUrl函数如下所示:

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

我有一个 mvc 控制器,它链接正确的 .cshtml 文件并在命中此路由时处理安全性,但这也适用于常规角度路由。在 .cshtml/html 文件中,您只需将动态控制器设置为根元素即可。每个模板的控制器都会有所不同。这将创建一个控制器层次结构,允许您将附加逻辑应用于所有卡,然后将特定逻辑应用于每个单独的卡。我仍然需要弄清楚我将如何处理我的服务,但是这种方法允许您使用仅基于控制器名称的 ng-repeat 为指令创建动态 templateUrl 和动态控制器。这是实现此功能的一种非常简洁的方式,并且它都是独立的。

于 2013-12-26T04:51:41.733 回答
0

1-您不需要使用: var parentElem = $(elem); as elem is a jquery element. This is similar to: $($('#myid'))

2-您不能动态分配控制器,因为指令控制器是在预链接阶段之前实例化的。

指令控制器可以访问 attrs,因此您可以根据您的值动态选择哪个内部函数(控制器内部的函数)attrs['addIcons']

附言。注意attrs['addIcons']是骆驼命名。

于 2013-10-18T18:41:39.753 回答