带有 templateUrl 的指令中的函数参数

Question

我创建了一个自定义指令，该指令具有一个独立的范围，该范围绑定到来自封闭控制器的函数并引用了一个 templateUrl。这是我的代码的样子：

html

<div ng-controller='MyCtrl as my'>
    <custom-directive data='my.data' on-search="my.find(param1, param2)"></custom-directive>
</div>

指令

app.directive('customDirective', function() {

    return {
        restrict : 'E',
        scope : {
            data : '=data'
            search : '&onSearch',
        },
        templateUrl : 'customDirective.html'
    };
});

模板

<div>
    <input ng-model='data.id'>
    <a ng-click='find(param1, param2)'></a>

</div>

函数find接收的参数也存储在data中。控制器data 绑定到指令而不是函数。我在函数中的日志甚至都不会显示。

正如我在许多示例中看​​到的那样（见下文），似乎有不同的方法可以做到这一点，但在我的情况下似乎没有一种方法。

示例1：在模板中传递参数和值的映射

<div>
    <input ng-model='data.id'>
    <a ng-click='find.({param1: data.value1, param2: data.value2})'></a>

</div>

示例 2：在指令中添加链接

app.directive('customDirective', function() {

    return {
        restrict : 'E',
        scope : {
            data : '=data'
            search : '&onSearch',
        },
        templateUrl : 'customDirective.html',
        link : function(scope, elem, attr) {
            scope.retrieve({param1: scope.data.value1,
                            param2: scope.data.value2});
        }

    };
});

示例 3：在链接中使用 scope.$apply()、$parse 但没有尝试过

有人可以告诉我怎么做，还可以向我解释link 部分（我不明白那部分），如果你觉得很慷慨，请展示示例中所示的可行替代方案。谢谢

Answer 1

您不必为您的函数传递参数，只需在您的 html 中传递参考

<custom-directive data='my.data' on-search="my.find"></custom-directive>

你的模板指令直接调用

<div>
    <input ng-model='data.id'>
    <a ng-click='find(data.value1, data.value2)'></a>
</div>

我还建议您使用 $scope 而不是控制器。所以在你的控制器中定义

$scope.data = {
    id: 1,
    value1: "value1",
    value2: "value2"
}

$scope.find = function (param1, param2) {
   //Your logic
}

并在你的模板中直接放

<custom-directive data='data' on-search="find"></custom-directive>

我希望这个回答能回答你的问题

我认为关于从 angular js doc 链接此文本非常清楚

想要修改 DOM 的指令通常使用链接选项。 链接采用具有以下签名的函数，函数 链接（范围、元素、属性）{ ... } 其中：

scope 是一个 Angular 范围对象。元素是 jqLit​​e 包装的

该指令匹配的元素。 attrs 是一个哈希对象，具有规范化属性名称的键值对及其 对应的属性值。

在我们的链接函数中，我们要更新 每秒显示一次时间，或每当用户更改时间时 我们的指令绑定到的格式化字符串。我们将使用 $interval 服务定期调用处理程序。这更容易 比使用 $timeout 但也更适合端到端测试， 我们要确保所有 $timeouts 之前都已完成 完成测试。我们还想删除 $interval 如果 指令被删除，所以我们不会引入内存泄漏。