使用 restrict to 'C' 的非常简单的 Angular 指令不起作用

Question

我正在做一个非常简单的指令，这是 app.js 代码

var myApp = angular.module('myApp', [])

myApp.directive('layout-top', function() {
    return {
        restrict: 'C',
        templateUrl: 'templates/layout__top.template.html'
    }
})

这是要加载的模板：

<div class="layout__top">
    <div class="top__left">
        Some kind of content
    </div>
</div>

而你，是 html 代码...

<!DOCTYPE html>
<html lang="en" ng-app="myApp" ng-strict-di>
    <head>
        <meta charset="UTF-8">
    </head>
    <body ng-controller="MainCtrl">
        <div class="layout__wrapper">
            <!-- TOPBAR GOES HERE -->
            <div class="layout-top"></div>
        </div>
        <script type="text/javascript" src="bower_components/angular/angular.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
    </body>
</html>

当我尝试对 A 或 E 使用 restric 时它有效，但不适用于 class。为什么？

Answer 1

你有

  <div class="layout-top"></div>

你需要

<div layout-top></div>

Answer 2

您不应两次使用 class="layout-top"（一次在您的模板中，一次在您的 HTML 代码中）

将模板中的 class 从 class="layout-top" 更改为 class="layout-top-tmp"

Answer 3

Nicholas 关于重复调用的说法是正确的。

但是在指令声明中指令的名称不应该是"layoutTop"吗？

myApp.directive('layoutTop', (...))

使用 restrict to 'C' 的非常简单的 Angular 指令不起作用

Very simple Angular directive using restrict to 'C' not working

class

angularjs

angular-directive