Question

我正在尝试加载由范围填充的ver="..."属性选择的副本摘录。

app.directive('hymn', function () {
    return {
        restrict: 'E',
        scope:{ },
        link: function (scope, element, attrs) {
            scope.contentUrl = 'content/excerpts/hymn-' + attrs.ver + '.html';        
                attrs.$observe("ver", function (v) {
                    scope.contentUrl = 'content/excerpts/hymn-' + v + '.html';    
                });
            },
        template: '<div><p ng-include="contentUrl"></p></div>'
    }
})

单个模板中有<hymn ver="hymn-{{scope.date.weekday}}-{{scope.date.season}}"></hymn>，<hymn ver="hymn-{{scope.date.week}}"></hymn>的多个实例，每个实例都会提取不同的摘录。

如果我注释掉scope:{},，我会成功获得第一个实例，但会在每个<hymn>节点重复。

Answer 1

scope:{ }创建了一个隔离范围，因此该指令无法访问其中任何其他内容

你想要的是：

scope: {
  ver: '@'
}

然后将链接功能中的引用更改为scope.ver。在谷歌上阅读有关隔离范围的内容。

Answer 2

我认为您希望使用$scope为每个指令使用子 scope: true，而不是使用$scope隔离scope: {}。< / p>

从父级继承属性将允许$eval指令内的attr.ver中的字符串。

AngularJS - 如何通过attrs将不同的$ scope属性传递给指令

2 个答案: