Question

我有一个Angular应用程序，我正在使用ui-grid。我希望在网格的单元格上有一个自定义操作，从我的应用程序调用方法。所以基本上，这意味着从一个指令调用一个在父层次结构中某处的方法。

这可以通过调用类似于：$ scope。$ parent。$ parent。$ parent。$ parent.foo（）来实现。但这似乎并不太好。

一种选择是创建一个递增函数，该函数上升$ scope的祖先。那更好，但看起来仍然有点奇怪。

另外......尝试实现这样的目标是不错的做法？

Answer 1

你是对的$parent.$parent.$parent绝对不是一个好习惯。

如果您正在调用的方法是另一个指令，您可以在子指令中要求该指令，然后，parentDirective的控制器函数将作为第四个参数注入到您的链接函数中：

在你的DDO中：

return {
    require : '^parentDirective',
    restrict : 'E',
    link : function (scope, elem, attrs, parentDirectiveController) {}
}

如果您要调用的是工厂/服务，您可以将该工厂/服务注入您的指令中，尽管这有时会产生代码异味，具体取决于你是什么试图注射。

最后，另一种方法是使用事件传播。从您的指令，您可以使用$scope.$emit将信息发送到父控制器：

来自指令：

$scope.$emit('directiveDidStuff', {
    data : 'blah'
});

在父控制器中：

$scope.$on('directiveDidStuff', function (evt, params) {
    this.data = params.data;  // equals blah
});

Answer 2

您可以使用“＆amp;”来实现相同目的通过指令中的一个范围变量.Like this，您可以将事件绑定到控制器方法，并从方法中，您可以执行您想要的操作，或者您希望在onClick上实现的原始业务逻辑网格用于许多模块，而不是在服务中将其平分并使其可重用并从事件方法调用服务。如果您对此方法有任何疑问，请告诉我。

示例的关键代码：

Html

   <my-component attribute-foo="{{foo}}" binding-foo="foo" isolated-expression- foo="updateFoo(newFoo)" >

指令

    var myModule = angular.module('myModule', [])
.directive('myComponent', function () {
    return {
        restrict:'E',
        scope:{
            /* NOTE: Normally I would set my attributes and bindings
            to be the same name but I wanted to delineate between 
            parent and isolated scope. */                
            isolatedAttributeFoo:'@attributeFoo',
            isolatedBindingFoo:'=bindingFoo',
            isolatedExpressionFoo:'&'
        }        
    };
})

来自指令

2 个答案: