如何将变量注入指令的范围？

Question

假设我有一个看起来像这样的指令:

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

这意味着我可以像这样写一个'attachment'元素列表:

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

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

因为我为指令设置了一个控制器,所以我可以内联调用该控制器的作用域函数.

这是控制器:

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变量不能用于绑定到该指令的作用域.

所以问题是,如何将其a提供给范围？

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

编辑:是的,getFilename可以接受一个参数,那就行了.但是,这也没有回答这个问题.我仍然想知道,没有解决方法,是否可以a在不使用内联的情况下进入范围.

例如,可能有一种方法可以将其直接注入控制器,因此它将被写为:

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

但是我从哪里传递它？我可以在指令声明中添加一些内容吗？也许我可以在ng-repeat旁边添加一个ng-*属性？我只是想知道它是否可能.

Answer 1

\n
但是等等 \xe2\x80\x94 这不会起作用。范围内没有变量“a”。由于 ng-repeat，我们可以使用内联变量，但是该变量不可用于绑定到指令的范围。
\n

\n\n

实际上变量a位于与指令控制器关联的范围内。该指令创建的每个控制器都会获取由 ng-repeat 迭代创建的子作用域。所以这有效（注意$scope .a.id）：

\n\n

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

这是一个显示控制器作用域、指令作用域和 ngRepeat 作用域的小提琴。

\n\n

\n
“如果同一元素上的多个指令请求新作用域，则仅创建一个新作用域。”——指令文档，“指令定义对象”一节
\n

\n\n

在您的示例中，ng-repeat 正在创建一个新作用域，因此同一元素上的所有指令都会获得相同的新（子）作用域。

\n\n

另外，如果您确实遇到需要将变量放入控制器的情况，那么使用属性会比使用 ng-init 更好。

\n