Question

我有3个文件：product-title.html，index.html调用product-title和app.js，我创建了我的指令。我的浏览器没有在product-title.html上显示代码

产品title.html

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

的index.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>

app.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"
   };
});
})();

gems是一系列具有名称，价格等的对象。代码工作正常，直到我尝试创建第一个指令。

Answer 1

可以帮助你。

<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"
   };
});

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

1 个答案: