Verwenden Sie eine Direktive in einer anderen Direktive

Question

Ich erstelle Anweisung für SVG-Symbol. Jetzt möchte ich diese Icon-Direktive in der anderen Direktive verwenden.

Icon-Richtlinie:

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

Ich möchte etwas wie folgt aus:

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

Wie ich verschachtelte Richtlinie erstellen kann?

Answer 1

versuchen Sie es so.

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>