在另一個指令中使用指令

Question

我爲SVG圖標創建指令。現在我想在另一個指令中使用這個圖標指令。

圖標指示：

<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>