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

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>