1

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

7
  • At first glance I'd check to make sure that the path to your template is correct. Easiest check is to look for a 404 error in your browser console window.
    – Brocco
    Nov 30, 2014 at 3:18
  • NO error found, I clicked the product-name.html and it works. Nov 30, 2014 at 3:22
  • 1
    Not sure what's going on... just copied your examples above into a plnkr and all seems to be working fine, see here: plnkr.co/edit/tVKDKSVQQCHH4ZuK7dBl?p=preview
    – Brocco
    Nov 30, 2014 at 3:28
  • wow thats interesting. Nov 30, 2014 at 3:31
  • That one isn't exactly working fine. Notice the styles aren't applied in the @Brocco plnk. See Plnk in my answer below for details but directive templates must have only one root element.
    – irth
    Nov 30, 2014 at 3:39

2 Answers 2

2

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>
4
  • Maybe a CORS problem? What does Chrome Dev Tools > Network tell you? Do you see an XHR request? Nov 30, 2014 at 3:43
  • even ng-include is taking no effect. Nov 30, 2014 at 3:48
  • sounds like version issues. double check all your bower deps or try to only use cdn's like the plnk.
    – irth
    Nov 30, 2014 at 3:51
  • What kind of errors? We can't help with vague statements. Nov 30, 2014 at 4:14
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.