Question

我试图在内部模板中的ng-switch-when属性中引用指令的属性。

我已经删除了一些复杂性，但基本上我的html看起来像这样：

<mydirective data-name="foo" data-index="1">Some Text</mydirective>

指令代码如下所示：

.directive('mydirective', function() {
  return {
    transclude: true,
    restrict: 'E',
    scope: {
      name: '@name',
      index: '@index'
    },
    template: '<p>{{name}}-{{index}}</p><div ng-switch-when=\'{{name}}-{{index}}\' ng-transclude></div>'
  };
});

在Chrome中运行时，它会显示为：

<mydirective data-name="foo" data-index="1" class="ng-scope ng-isolate-scope">
    <p class="ng-binding">foo-1</p>
    <!-- ngSwitchWhen: {{name}}-{{index}} -->
</mydirective>

请注意＆＃34; foo＆＃34;和＆＃34; 1＆＃34;将其放入<p>标签，但不要放入ngSwitchWhen。

已编辑添加 我希望在我的页面上实际看到的是这样的：

<mydirective data-name="foo" data-index="1" class="ng-scope ng-isolate-scope">
    <p class="ng-binding">foo-1</p>
    <div ng-switch-when="foo-1">Some Text</div>
</mydirective>

Answer 1

我不确定您是否可以使用表达式来打印值而不是字符串值。 https://plnkr.co/edit/BtTLhKDZqMTGT9wuETq8

请检查ngSwitch文档 https://docs.angularjs.org/api/ng/directive/ngSwitch

请注意，要匹配的属性值不能是表达式。它们被解释为要匹配的文字字符串值。例如，ng-switch-when="someVal"将匹配字符串"someVal"，而不是与表达式$scope.someVal

的值相匹配

Answer 2

ng-switch-when=\''内的变量可能无法返回您想要的内容。

尝试使用：

ng-switch-when=\'{{name + '-' +index}}\'

而不是

ng-switch-when=\'{{name}}-{{index}}\'

如何在模板中的ng-switch中使用指令的属性

2 个答案: