在另一个指令中使用一个指令

【问题标题】：Use a directive in another directive在另一个指令中使用一个指令
【发布时间】：2016-09-26 11:15:30
【问题描述】：

我为 SVG 图标创建指令。现在我想在另一个指令中使用这个图标指令。

图标指令：

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

我想要这样的东西：

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

如何创建嵌套指令？

【问题讨论】：

标签： javascript angularjs svg

【解决方案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>

【讨论】：