Используйте директиву в другой директиве

Question

Я создаю директиву для значка SVG. теперь я хочу использовать эту директиву значка в другой директиве.

Icon директива:

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

Я хочу что-то вроде этого:

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

Как я могу создать вложенную директиву?

Answer 1

попробуйте вот так.

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>