CODEWITHSUNDEEP
javascripthtmlangularjs
Ahmad Al-kheat
Ahmad Al-kheat

Reputation: 1795

Angular directive taking no effect

I am new to angular and I am trying to build my first directive, but it's not rendering inside my HTML.

Here is my HTML page : the directive is called at the bottom of the HTML 

    <!DOCTYPE html>
    <html ng-app="store">
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
        <script type="text/javascript" src="angular.min.js"></script>
        <script type="text/javascript" src="app.js"></script>
    </head>

    <body ng-controller="storeController as store">
    <ul class="list-group">
        <li class="list-group-item" ng-repeat="product in store.product">
            <h3 >
                <product-name></product-name>
            </h3>
</li>
</ul>
</body>
</html>

And here is my app.js : 

(function(){
var app = angular.module("store",[]);
var gem = [
    {
    name: "Dodec",
    price: 2.95,
    canPurchase: true,
    soldOut: false,
    reviews: []
    },
    {
    name: "Panta",
    price: 20.4,
    canPurchase: true,
    soldOut: false,
    reviews: []
    }
];
app.controller("storeController",function(){
    this.product = gem;
});

app.controller("tabController",function($scope){
    $scope.tab = 1;
    $scope.SetTab = function(value){
        $scope.tab = value;
    };

    $scope.IsSet = function(value){
        return value === $scope.tab;
    }
});

app.controller("ReviewController", function($scope){
    $scope.review = "";

    $scope.addReview = function(product){
        product.reviews.push($scope.review);
        $scope.review = "";
    };

});

app.directive("productName",function(){
    return {
        restrict : "E",
        templateUrl : "product-name.html"
    };
});




})();

notice the directive at the end.

And finally here is my product-name.html file : 

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

What did I do wrong? why is the directive not behaving like it should?

Thanks

Upvotes: 1

Views: 171

Answers (2)

Ahmad Al-kheat
Ahmad Al-kheat

Reputation: 1795

The problem was with my server, I downloaded the http server from here https://github.com/nodeapps/http-server then started it and the directive shows up now.

Upvotes: 0

irth
irth

Reputation: 1716

In product-name.html, AngularJS directive templates must have one root element.

I wrapped the html in divs in this plnkr.

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

Upvotes: 2

Related Questions