Facing issues with directive in AngularJS

Question

facing problems with my directive that I've created. The directive seems to be executing, I know this as console.log() was called and some of the template was shown too however the part which didn't show up was the one with angular expression. Here's a sample:

my index.html:

<!DOCTYPE html>
<html ng-app="appModule" ng-controller="controller">

<head>
    <title>this is the title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>

<body>
    <ul>
        <li>{{section.item1}}</li>
        <li>{{section.item2}}</li>
        <li>{{section.item3}}</li>
    </ul>
    <div ng-repeat='product in section.products_section.list_products'>
        <directive data='product'></directive>
    </div>
</body>
<script src="angularjs/app.js"></script>

</html>

my app.js:

angular.module('appModule', []).controller('controller', ['$scope', function($scope) {
    $scope.section = {
        item1: 'this is item1',
        item2: 'this is item2',
        item3: 'this is item3',
        products_section: {

            list_products: [

                    {
                        product_name: 'name 1'

                    }, {
                        product_name: 'name 2'
                    }, {
                        product_name: 'name 3'
                    }

                ] //end of list_products
        }
    };
}]).directive('directive', [function() {
    return {
        restrict: 'E',
        scope: {
            date: '='
        },
        templateUrl: 'angularjs/template.html',
        replace: true,
        controller: function($scope) {
            console.log('this is controller in directive is called');
        }

    };
}]);

my template html:

<ul>
            <li>{{product.product_name}}</li>
            <li>this-is-to-show-this-is-being-executed</li>
</ul>

firefox console: this is controller in directive is called

what it appears like in browser:

this is item1
this is item2
this is item3

this-is-to-show-this-is-being-executed

this-is-to-show-this-is-being-executed

this-is-to-show-this-is-being-executed

SORRY, Stackoverflow says that I need at least 10 rep to post images.

lostintranslation · Accepted Answer · 2015-08-29 19:11:00Z

2

I see a couple things wrong.

    scope: {
        date: '='
    }

Should be:

    scope: {
        data: '='
    },

And your reference to the scope variable in the directive should be data. not product.

<ul>
            <li>{{data.product_name}}</li>
            <li>this-is-to-show-this-is-being-executed</li>
</ul>

answered Aug 29, 2015 at 19:11

lostintranslation

24.8k53 gold badges174 silver badges290 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Drazisil · Accepted Answer · 2015-08-29 19:47:34Z

This works.

app.js

angular.module('appModule', [])
  .controller('controller', ['$scope', function($scope) {
    $scope.section = {
      item1: 'this is item1',
      item2: 'this is item2',
      item3: 'this is item3',
      products_section: {

        list_products: [

            {
              product_name: 'name 1'

            }, {
              product_name: 'name 2'
            }, {
              product_name: 'name 3'
            }

          ] //end of list_products
      }
    };
  }])
  .directive('directive', [function(scope) {
    return {
        restrict: 'E',
        templateUrl: 'template.html',
        replace: true,

    };
}]);

index.html

<!DOCTYPE html>
<html ng-app="appModule" ng-controller="controller">

<head>
  <title>this is the title</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>

<body>
  <ul>
    <li>{{section.item1}}</li>
    <li>{{section.item2}}</li>
    <li>{{section.item3}}</li>
  </ul>

  <ul>
    <li>{{section.products_section.list_products[0].product_name}}</li>
    <li>{{section.item2}}</li>
    <li>{{section.item3}}</li>
  </ul>

  <div ng-repeat='product in section.products_section.list_products'>
    <directive></directive>
  </div>

  <script src="app.js"></script>
</body>

</html>

Plunkr

Collectives™ on Stack Overflow

Facing issues with directive in AngularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related