CODEWITHSUNDEEP
javascriptangularjssvg
Dark star
Dark star

Reputation: 5832

Use a directive in another directive

I create directive for SVG icon. now i want use this icon directive in the another directive.

Icon directive:

<icon p="shopping-add"></icon>

I want something like this:

app.directive("product", function() {
  return {
      restrict : "E",
      require: 'ngModel',
      scope:{
        ngModel:"="
      },
      template : '<div><icon p="iconName"></icon></div>'
  };
});

How i can create nested directive?

Upvotes: 0

Views: 270

Answers (1)

Hadi
Hadi

Reputation: 17289

try like this.

var app = angular
  .module('MyApp', [
  ])
.controller('Main', ['$scope', function ($scope) { 

}])
.directive("product", function() {
  return {
      restrict : "E",
      template : '<div><icon image="https://lh6.googleusercontent.com/-s85bDKtYHLk/AAAAAAAAAAI/AAAAAAAAAVI/SSfL19tTusw/photo.jpg?sz=32"></icon></div>'
  };
})
.directive("icon", function() {
  return {
      restrict : "AE",
      scope :{
        image:'@'
      },
      template : '<img src="{{image}}" />'
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 <div class="main-content" ng-app="MyApp" ng-controller="Main as myCtrl">
      <div>
           <product ></product>
     </div>
</div>

Upvotes: 1

Related Questions