创建指令以跨模型和控制器使用

时间:2016-09-08 14:17:06

标签: javascript angularjs

我的应用程序中的功能非常相似,用户可以输入标题和链接。

所以 - 我以为我会创建一个指令。但是,该指令需要在各种控制器的上下文中使用。

例如 - 在我的/ contracts视图中,控制器是ContractsController,在提交时,ContractsController将发送一个API请求来保存合同。

但在我的/ meeting-notes视图中,控制器是MeetingNotesController,它将处理对不同端点的请求 - 为客户端保存会议记录。

到目前为止,这是我的指示: 的 app.js

.directive('myprefixLinkAttachment', function($timeout) {
    return {
        restrict: 'A',
        templateUrl: '../partials/directives/link-attachment.html',
        scope: {},
        link: function link(scope, element, attrs) {
            $timeout(function() {
                console.log(scope.$parent);
                console.log(scope.title);
            }, 5000);
        }
    }
})

超时返回正确的值 - 我正在测试是否可以获得该值。

链接 - attachment.html

<md-input-container class="md-block" md-no-float flex="100" flex-gt-xs="66">

    <input ng-model="title" placeholder="Title...">

</md-input-container>

<md-input-container class="md-block" flex="100" flex-gt-xs="33">

    <input ng-model="link" placeholder="Title..." ng-keypress="CtrlNameHere.save($event)">

</md-input-container>

我从内部(在此示例中)调用指令 ContractsController - 但这需要改变。

<div layout="column" layout-gt-xs="row" class="new-entry-line" myprefix-link-attachment>

总之 - 我希望自由使用该指令,同时能够调用正确的控制器来处理CtrlNameHere.save()方法。

1 个答案:

答案 0 :(得分:1)

你还没有问过一个问题。 我猜你的意思是在不同控制器的范围内使用相同的指令时如何调用控制器的函数。

您需要做的是将指令传递给它将调用的函数。

所以在你的指令中你需要接受一个controllerFn属性,如下所示:

scope: {
    controllerFn: "="
}

使用指令时,将控制器的功能传递给它,如下所示:

<myprefix-link-attachment controller-fn="someControllerFunction">

最后在模板中,调用范围内已有的函数:

ng-keypress="controllerFn($event)"