Question

假设我有一个带有指令的模块如下（这是一个未经测试的粗略）我需要实现3个基本的东西

将出现的元素的配置
基本控制器可以使用的事件侦听器
基本控制器可以调用的公共方法

angular.module（＆＃34; componentModule＆＃34;，[]）。.directive（＆＃34; myComp＆＃34;，function（）{

return{
    replace:true,
    template:'<h2>This is my component</h2>',
    scope:{config= "@"},
    link:function(scope,element,attr){
        this.deleteElement = function(id){
        //writing the code to delete this component
        //This is a API function that the user can call to delete
    }
    if (!scope.config.visible){
        //this is a configuration object for the element
        this.visible(false)}
    }
} })

然后我的基本HTML就像包含下面的指令调用

<div myComm="first" config="eleConfig"></myComp>
<div myComm="second" config="newEleConfig"></myComp>

我的基本HTML有一个单独的控制器，如下所示，

angular.module("baseApp",['componentModule'])
 .controller('baseCtrl',function(){
    $scope.eleConfig = {
      visible:true,
      delete:function(e){
        //This is called if we call the delete method 
        } 
     }
    //this is how the delete method is to be called
    $scope.first.deleteElement();
  })

问题如何在baseCtrl中调用deleteElement（）方法，如上所示（想要以与KENDO UI相同的方式执行）

Answer 1

angular使用的模式是将指令API公开给作用域。这就是ng-model和ng-form暴露ngModelController和ngFormController API的方式。

我将如何做到这一点：

angular.module("componentModule",[])
 .directive("myComp",function($parse){
    return{
        replace:true,
        scope: {
            config: '&'
        },
        template:'<h2>This is my component</h2>',
        controller: function($scope) {
            //Directive API functions should be added to the directive controller here or in the link function (if they need to do DOM manipulation)
        },
        link:function(scope,element, attr, ctrl){
            //add to directive controller

            if(scope.config().visible) {
                //element should be visible, etc.
            }

            ctrl.deleteElement = function(){
                //if this function is called we want to call the config.delete method:

                if(scope.config && scope.config.delete) {
                    //calling the scope.config() method returns the config object from the parent
                    scope.config().delete(element);
                }
            }

            if(attr.myComp) {
                //change to scope.$parent
                scope.$parent[attr.myComp] = ctrl;
            }
        }
      }
   })

假设标记为：

<div my-comp="first" config="configObject"></div>
<div my-comp="second" config="configObject"></div>

在您的基本控制器中

$scope.first.deleteElement();

或

$scope.second.deleteElement();

会删除相应的元素。

更新：

我已根据您更新的问题更新了该指令。您希望将配置对象传递给指令。最好的方法是使用＆amp;捆绑。如果您使用＆amp;绑定，您需要记住该指令将创建一个新范围，并且您必须将控制器附加到$ scope。$ parent。

Answer 2

在你的第一个要求中，你说你想要在指令中编写删除函数，但是在KendoUI的情况下，实际的删除（更改）函数实现是在基本控制器中完成的，而删除（更改）事件是在组件值更改，后者又调用指令在基本控制器中定义的删除功能。如果你想实现像KendoUI那样的东西，那么看看这个

link to plunker

启动浏览器控制台以查看日志。当输入元素改变时，KendoUI组件的更改事件会自动发生，但在这种情况下，我会在3秒后手动触发删除事件。

将角度指令功能暴露给另一个模块

2 个答案: