2016-03-04 4 views
3

У меня есть 3 файла: product-title.html, index.html, вызывающий название продукта и app.js, где я создаю свою директиву. Мой браузер не показывает код на продакт-title.htmlПочему моя директива в AngularJs не работает?

продукта 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 - массив объектов с их именами, ценами и т. д. Код работал j Довольно, пока я не попытался создать первую директиву.

+1

Вы получаете какие-либо ошибки в отладчике? Какие-либо сетевые ошибки? – zero298

+1

В контроллере вы написали this.products = gems; что здесь жемчужины? Вы получаете какую-либо ошибку? – Indra

+0

Попробуйте импортировать $ scope в контроллер и делать $ scope.products = gems; – mdegges

ответ

0

Может помочь вам.

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