angularjs - 如何将变量注入(inject)指令的范围？

Question

假设我有一个如下所示的指令:

directive('attachment', function() {
    return {
        restrict: 'E',
        controller: 'AttachmentCtrl'
    }
})

这意味着我可以编写一个“附件”元素列表，如下所示:

<attachment ng-repeat="a in note.getAttachments()">
    <p>Attachment ID: {{a.id}}</p>
</attachment>

在上面的代码片段中，我们假设 note.getAttachments()返回一组简单的 javascript 对象哈希。

由于我为指令设置了一个 Controller ，因此我可以内联包含对该 Controller 范围函数的调用。

这是 Controller :

function AttachmentCtrl($scope) {
    $scope.getFilename = function() {
        return 'image.jpg';
    }
}

这是修改后的 HTML，当我们包含对 $scope.getFilename 的调用时内联函数(新的第 2 段):

<attachment ng-repeat="a in note.getAttachments()">
    <p>Attachment ID: {{a.id}}</p>
    <p>Attachment file name: {{getFilename()}}
</attachment>

但是，这没有用。这将只打印相同的字符串“image.jpg”作为每个附件的文件名。

实际上，附件的文件名基于附件 ID。因此，ID 为“2”的附件的文件名为“image-2.jpg”。

所以我们的 getFilename功能需要修改。让我们修复它:

function AttachmentCtrl($scope) {
    $scope.getFilename = function() {
        return 'image-' + a.id + '.jpg';
    }
}

但是等等——这行不通。没有变量 a范围内。我们可以使用变量 a内联感谢 ng-repeat , 但是 a变量对绑定(bind)到指令的范围不可用。

所以问题是，我该如何制作 a可用范围？

请注意:我意识到在这个特定的示例中，我可以打印 image-{{a.id}}.jpg排队。但这并不能回答问题。这只是一个极其简化的例子。实际上， getFilename函数太复杂而无法内联打印。

编辑:是的， getFilename可以接受一个论点，这会奏效。然而，这也不能回答问题。我还是想知道，没有变通办法，能不能得到 a进入范围而不使用内联。

例如，也许有一种方法可以将它直接注入(inject) Controller ，所以它可以写成:

function AttachmentCtrl($scope, a) { ... }

但是我会从哪里传进去呢？有什么我可以添加到指令声明中的吗？也许我可以在 ng-repeat 旁边添加一个 ng-* 属性？我只是想知道这是否可能。

Answer 1

But wait — this won't work. There is no variable "a" in the scope. We can use the variable a inline thanks to the ng-repeat, but that a variable isn't available to the scope bound to the directive.

实际变量 a在与指令 Controller 关联的范围内。该指令创建的每个 Controller 都获取由 ng-repeat 迭代创建的子范围。所以这行得通(注意 $scope .a.id):

function AttachmentCtrl($scope) {
    $scope.getFilename = function() {
        return 'image-' + $scope.a.id + '.jpg';
}

这是 fiddle它显示了 Controller 范围、指令范围和 ngRepeat 范围。

"If multiple directives on the same element request new scope, only one new scope is created. " -- Directive docs, section "Directive Definition Object"

在您的示例中， ng-repeat 正在创建一个新范围，因此同一元素上的所有指令都获得相同的新(子)范围。

此外，如果您确实遇到需要将变量放入 Controller 的情况，使用属性会比使用 ng-init 更好。