我有 3 个文件:product-title.html、调用产品标题的 index.html 和我创建指令的 app.js。 我的浏览器没有显示 product-title.html 上的代码
产品标题.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>
应用程序.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 是一个包含名称、价格等的对象数组。 在我尝试创建第一个指令之前，代码一直运行良好。
最佳答案
可能对你有帮助。
<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"
};
});
关于javascript - 为什么我在 AngularJs 中的指令不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35802040/