指令在角度不起作用答案

【问题标题】：directive not working in angular指令在角度不起作用
【发布时间】：2015-07-16 07:33:13
【问题描述】：

我将控制器绑定到索引文件，我可以通过 $scope 从控制器获取值。除了指令之外，所有事情都按预期工作。

我正在为我的应用程序添加一个页脚作为指令。由于某种原因，它不起作用。

index.html

<div class="main" ng-controller="MainController">
      <div class="container">
        <h1>Specials for {{ today | date }}</h1>
        <h2>Appetizers</h2>
        <div class="appetizers row" ng-repeat="appetizer in appetizers">
          <div class="item col-md-9">
            <h3 class="name">{{appetizer.name}} </h3>
            <p class="description"> {{appetizer.description}}</p>
          </div>

        </div>
        <h3> footer</h3>
           <pizza-footer></pizza-footer>
      </div>
    </div>

JS 代码

var app = angular.module('PizzaApp',[]);

    app.controller('MainController', ['$scope', function($scope) {
      $scope.today = new Date();

      $scope.appetizers = [
        {
          name: 'Caprese',
          description: 'Mozzarella, tomatoes, basil, balsmaic glaze.',
          price: 4.95
        },
        {
          name: 'Mozzarella Sticks',
          description: 'Served with marinara sauce.',
          price: 3.95
        },
        {
          name: 'Bruschetta',
          description: 'Grilled bread garlic, tomatoes, olive oil.',
          price: 4.95
        }

      ];
    }]);

    app.directive('pizzafooter', function(){
       return {
            restrict:'E',
            templateUrl: 'pizzafooter.html'

        };
     });

    console.log("pizza footer js called");

我的代码位于： Plunker Demo

我在这里错过了什么？

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

您需要将指令名称更改为pizzaFooter as

app.directive('pizzaFooter', function(){

UPDATED DEMO

<pizza-footer></pizza-footer> 应与 pizzaFooter 的指令名称匹配

请参阅 Angular 指令命名约定。

Angular 规范化元素的标签和属性名称，以确定哪些元素匹配哪些指令。我们通常通过区分大小写的 camelCase 规范化名称（例如 ngModel）来引用指令。然而，由于 HTML 不区分大小写，我们在 DOM 中以小写形式引用指令，通常在 DOM 元素上使用破折号分隔的属性（例如 ng-model）。

归一化过程如下：

从元素/属性的前面去除 x- 和 data-。将 :、- 或 _ 分隔的名称转换为 camelCase。例如，以下形式都是等价的，并且匹配 ngBind 指令：

DOC

【讨论】：