AngularJS - ng-switch内部的指令不起作用

Question

我在ng-switch内有一条指令如下：

<div ng-switch on="myModel">
    <div ng-switch-when="foo">
        <zippy></zippy>
    </div>
    //Other ng-switch-when directives
</div>

该指令定义为：

app.directive('zippy', function() {
    return {
        scope: false,
        template: "Hello FooBar"
    };
});

现在，当页面加载时，虽然myModel确实变为foo，但模板不会加载。以下是borwser中元素的状态：

<div ng-switch-when="foo" class="ng-scope">
    <zippy></zippy>
</div>

类ng-scope被追加 - 就是这样。元素不会更改 - 指令不会替换为模板。我究竟做错了什么？我怎样才能使指令起作用？

Answer 1

您需要将restrict添加到您的指令中：

演示：http://plnkr.co/edit/Jc77jrY4U0xGalN5QkZA

app.directive('zippy', function() {
    return {
        scope: false,
        template: "Hello FooBar",
        restrict: 'E'
    };
});

文档：http://docs.angularjs.org/guide/directive

restrict - EACM子集的字符串，它将指令限制为特定的指令声明样式。如果仅在属性上允许省略指令。

E - 元素名称：

A - 属性：

C - 班级：

M - 评论：