Question

我将控制器绑定到索引文件，我可以通过$ 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

我在这里缺少什么？

Answer 1

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

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

UPDATED DEMO

<pizza-footer></pizza-footer>应与pizzaFooter

的指令名称匹配

请参阅角度指令命名约定。

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

规范化过程如下：

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

DOC

指令不工作角度

1 个答案: