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时，它可以使用，但不能使用类。为什么呢？

Answer 1

您不应该使用#main_nav { color: white; padding: 30 px; margin: 0px 0px; height: 200 px; width: 100%; text-align: left; **background-image: url(../Images/Banner-2.jpg);** }两次（一次在模板中，一次在HTML代码中）

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

Answer 2

尼古拉斯对重复的电话是正确的。

但指令的名称不应该是＆＃34; layoutTop＆＃34;在指令声明中？

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

Answer 3

你有

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

你需要

<div layout-top></div>

非常简单的Angular指令使用restrict to＆＃39; C＆＃39;不工作

3 个答案: