Question

我正在尝试在angular中添加指令并使用相同的方法来显示值。但是，值不会显示。

我的HTML代码

<!doctype html>
<html>
  <head>
    <link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
    <link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700italic|Oswald' rel='stylesheet' type='text/css'>
    <link href="css/main.css" rel="stylesheet" />
    <script src="js/vendor/angular.min.js"></script>
  </head>
  <body ng-app="PizzaPlanetApp">
    <div class="header" >
      <h1><span>Pizza</span><span>Planet</span></h1>
    </div>

    <div class="main" ng-controller="MainController">
      <div class="container">
        <h1>Specials for {{ today | date }}</h1>

        <h2>Appetizers</h2>
        <div  ng-repeat="appetizer in appetizers">
          <div class="item col-md-9">
              <pizza-info info=appetizer> </pizza-info>
        </div>


      </div>
    </div>
    </div>
    <!-- Modules -->
    <script src="js/app.js"></script>

      <!-- Controllers -->
    <script src="js/controllers/MainController.js"></script>

       <!--directives-->
     <script src="js/directives/pizzaInfo.js"></script>
  </body>
</html>

控制器

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
    }

  ];
}]);

指令（pizzaInfo.js）

app.directive('pizzaInfo', function(){
    return {
        restirct:'E',
        scope:{ 
            info:'='
        },
        templateUrl: 'js/directives/pizzaInfo.html'

    };
});

指令html（pizzaInfo.html）

 <h3 >{{info.name}} </h3>
 <p > {{info.description}}</p>
 <p >{{info.price | currency}} </p>

我在console.log中没有收到任何错误。我在这里失踪的是什么？

Answer 1

Syntax Error :))

app.directive('pizzaInfo', function(){
   return {
   /****/restrict:'E',
    scope:{ 
        info:'='
    },
    templateUrl: 'js/directives/pizzaInfo.html'

    };
 });

使用angular指令不会显示值

1 个答案: