Angularjs ng类属性不适用于指令，但适用于原始代码？

我正在尝试重构一个Angular应用程序，它使用指令非常冗长。作为页面布局的一部分，有一种人造的标签浏览体验（看起来像标签，实际上是作为普通链接实现的），这是重构的重点。我成功地创建了一个名为tabbedNav的指令来保存选项卡的容器。我正在尝试创建一个指令来保存各个选项卡链接：

.directive("tabHeader", function(){
        return {
        restrict: 'E',
        transclude: true,
        template: '<li ng-class="{\'my_css_class\': pageName === \'{{flag}}\' }"><a ng-href = {{url}} ng-transclude></a></li>',
        scope: {
            flag: '@',
            url: '@'
        },
        link: function(scope, elem, attr) {}
    }
})

其思想是选项卡标题出现在每个页面上，每个页面都有一个ID；对于每个选项卡（每个选项卡都出现在每个页面上），如果页面ID等于选项卡的标志值，则设置CSS，否则不设置CSS

我遇到的问题是，虽然锚定的href值设置正确，但ng类设置的CSS样式却没有设置正确（是的，我已经四次检查标志值是否设置正确）。但是，当我用模板中的原始HTML替换tab header标记（用实际值替换标志和url）时，一切正常：

<tabbed-nav>
    <li ng-class="{'my_css_class': pageName === 'value1' }">
        <a ng-href = "value2" ng-transclude>
            some text here
        </a>
    </li>
</tabbed-nav>

我之所以想将其作为一个指令来实现，是因为我想在页面上有许多选项卡标题，并且我想多次重用这个指令

---

谢谢。

您不需要在

ng类

中使用带有

{{}

（插值）的表达式，它将抛出一个错误。即使是引用也不需要。它应该如下所示

'<li ng-class="{\'my_css_class\': pageName === flag }"><a ng-href = {{url}} ng-transclude></a></li>'

”
”

另外，由于您正在为指令使用

isolatedScope

，

pageName

值在指令内部无法访问。您必须将

pageName

作为绑定传递给指令

---

事实证明，我没有意识到角度范围界定的影响。我的指令无法直接读取页面级范围字段，我还必须将页面级字段传递到指令中。这看起来很尴尬，但这似乎是需要做的

工作代码：

.directive("tabHeader", function(){
    return {
        restrict: 'E',
        transclude: true,
        template: '<li ng-class="{\'my_css_class\': \'{{scope-value}}\' === \'{{flag}}\' }"><a ng-href = {{url}} ng-transclude></a></li>',
        scope: {
            flag: '@',
            url: '@',
            scope-value: '@'
        },
        link: function(scope, elem, attr) {}
    }
})

.directive（“tabHeader”，function（））{
返回{
限制：'E'，
是的，
模板：“
，
范围：{
旗帜：“@”，
网址：“@”，
作用域值：'@'
},
链接：函数（作用域、元素、属性）{}
}
})

和HTML：

<tab-header 
    flag="value1" 
    url="value2" 
    scope-value={{value-from-controller-scope}}>
        text here
</tab-header>

此处文本

不幸的是，这不起作用。当我在开发人员控制台中检查页面源代码时，它以前有标志值，现在没有了，它只是将“标志”作为文本。此外，没有以现有方式抛出错误，只是不起作用。我似乎遗漏了一个细节（我将在此处进行评论并编辑我的OP）：pageName在我的控制器中设置为$scope.pageName。此答案遗漏了一些细节，但它确实让我找到了需要的答案。谢谢您还需要什么详细信息？您对隔离范围的评论帮助了我。当我在谷歌上搜索将值导入指令的上下文中的含义时，我在找到的教程中得到了我需要的答案。这应该是公认的答案，以防我忘记重新讨论这个问题以标记它。

.directive("tabHeader", function(){
    return {
        restrict: 'E',
        transclude: true,
        template: '<li ng-class="{\'my_css_class\': \'{{scope-value}}\' === \'{{flag}}\' }"><a ng-href = {{url}} ng-transclude></a></li>',
        scope: {
            flag: '@',
            url: '@',
            scope-value: '@'
        },
        link: function(scope, elem, attr) {}
    }
})

<tab-header 
    flag="value1" 
    url="value2" 
    scope-value={{value-from-controller-scope}}>
        text here
</tab-header>