Question

我正在尝试重构一个使用指令非常冗长的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) {}
    }
})

这在代码中的用法如下：

<tabbed-nav>
    <tab-header flag="value1" url="value2">some text here</tab-header>
</tabbed-nav>

应注意，在我的控制器中将pageName值设置为：

$scope.pageName = value1;

这个想法是在每个页面上都出现选项卡标题，并且每个页面都有一个ID；对于每个选项卡（每个页面上都存在每个选项卡），如果页面ID等于该选项卡的标记值，则设置CSS，否则设置为CSS。

我遇到的问题是，虽然正确设置了锚的href值，但是ng-class设置的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>

之所以要将此指令实现为指令，是因为我打算在页面上放置许多制表符，并且希望多次重用此指令。

谢谢。

Answer 1

您不需要在{{}}内使用ng-class（内插）的表达式，它将引发错误。即使是引号也没有必要。它应该如下图所示

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

此外，由于您将isolatedScope用于指令，因此pageName的值在指令内部将无法获得。您必须将pageName传递给指令作为绑定。

Check Plunker

Answer 2

结果证明，我不了解Angular范围界定的影响。我的指令无法直接读取我的页面级范围字段，因此我也必须将页面级字段传递给该指令。这似乎很尴尬，但这似乎就是需要做的事情。

工作代码：

.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) {}
    }
})

和HTML：

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

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

2 个答案: