为什么我在 AngularJs 中的指令不起作用

Why my directive in AngularJs is not working?

本文关键字：指令 不起作用 AngularJs 为什么      更新时间：2023-09-26

我有 3 个文件：产品标题.html、索引.html调用产品标题和应用程序.js我在其中创建我的指令。我的浏览器没有在产品标题上显示代码.html

产品标题.html

<h3>
  {{product.name}}
  <em class="pull-right">{{product.price | currency}}</em>
</h3>

索引.html

<html ng-app="gemStore">
 <head>
  <script type="text/javascript" src="angular.min.js"></script>
  <script type="text/javascript" src="app.js"></script>
 </head>
<body>
 <div class="list-group" ng-controller="StoreController as store">
  <div class="list-group-item cuerpo" ng-repeat="product in store.products">
   <product-title></product-title>
  </div>
 </div>
</body>

应用.js

(function() {
var app = angular.module('gemStore', []);
app.controller('StoreController', function(){
    this.products = gems;
});
app.directive('productTitle', function(){
   return {
     restrict: "E",
     templateUrl: "product-title.html"
   };
});
})();

宝石是一组对象及其名称、价格等。代码运行良好，直到我尝试创建第一个指令。

可能会帮助你。

<html ng-app="gemStore">
 <head>
  <script type="text/javascript" src="angular.min.js"></script>
  <script type="text/javascript" src="app.js"></script>
 </head>
<body>
 <div class="list-group" ng-controller="StoreController">
  <div class="list-group-item cuerpo" ng-repeat="product in products">
   <product-title></product-title>
  </div>
 </div>
</body>

JS代码：

var app = angular.module('gemStore', []);
app.controller('StoreController', function($scope){
    var gems = [       
                {name: "LIVKR-2015", price: 20},
                {name: "LIVHCC-2015", price: 22},
                {name: "LIKKCC-2015", price: 24},
                {name: "LICPCC-2015", price: 20},
                {name: "LMLHCC-2015", price: 20}
                ];
    $scope.products = gems;                 
});
app.directive('productTitle', function(){
   return {
     restrict: "E",
     templateUrl: "product-title.html"
   };
});
相关文章：