传递到指令而不将其添加到范围

Passing into a directive without adding it to scope

本文关键字：添加 范围 指令      更新时间：2023-09-26

我有一个指令，其中项目列表（数组）通过控制器的作用域传递到指令的作用域中，然后指令的模板可以访问这些项。

我希望它能够将项目列表传递给指令（然后在链接函数中使用），然后无法通过指令的模板直接访问。

即，如果我们有以下指令：

directive('itemList', function(){
return {
    scope: {
        items: '='
    }
    link: function(scope, elem, attrs){
        var item-list = scope.items;
        // ... want to manipulate first ...
    }
}
})

变量 scope.items 现在可用于指令使用的任何模板。而我不希望是这种情况，并希望在不告知范围的情况下将某些内容传递给指令。这可能吗？

由于指令范围几乎是指令模板使用的范围，因此我没有看到任何明显的方法来以严格的信息隐藏方式执行此操作。但是，为什么不对传递的范围变量以及模板绑定的内容使用不同的名称呢？例如，如果您说scope: { myPrivatePassedItems: '=items' }，您现在可以根据需要使用scope.myPrivatePassedItems，然后再将其设置为 scope.items 。使用这种方法，指令和指令模板中的 HTML 只看到"项目"，但在内部你的指令有自己的"私有"变量。

我应该补充一点，以上是从使用者到指令模板的单向数据流所需的简单更改。如果还需要更新原始 items 数组，则还需要在完成初始设置后在scope.items数组上添加一个scope.$watch。然后，您需要将这些更改（可能带有修改）带回scope.myPrivatePassedItems以便更新使用者的数组。

您可以使用

$parse 服务在不使用 scope: {} 的情况下检索值，但您将丢失使用 scope: { items: '=' } 固有获得的 2 路数据绑定。正如Dana Cartwright所提到的，如果您需要2路绑定，则必须使用手表手动设置。

directive('itemList', function($parse){
    return {
        link: function(scope, elem, attrs){
            var itemList = $parse(attrs['items'])(scope);
            // do stuff with itemList
            // ...
            // then expose it
            scope.itemList = itemList;
        }
    };
});
相关文章：