Question

我想要插入翻译，我已经看过像这样的元素指令的例子：

<my-directive>
    <slot-a></slot-a>
    <slot-b></slot-b>
</my-directive>

我想知道它是否必须是元素指令。我想做这样的事情：

<div my-directive>
    <slot-a></slot-a>
    <slot-b></slot-b>
</div>

这可能吗？我找不到任何文件说它可以或不可以。

Answer 1

显然你可以 - 至少在最新版本的AngularJS中。下面的代码段是multi-slot transclusion部分中元素指令的变体。

(function(angular) {
  'use strict';
  angular.module('multiSlotTranscludeExample', [])
    .directive('pane', function() {
      return {
        restrict: 'A',
        transclude: {
          'title': '?paneTitle',
          'body': 'paneBody',
          'footer': '?paneFooter'
        },
        template: '<div style="border: 1px solid black;">' +
          '<div class="title" ng-transclude="title">Fallback Title</div>' +
          '<div ng-transclude="body"></div>' +
          '<div class="footer" ng-transclude="footer">Fallback Footer</div>' +
          '</div>'
      };
    })
    .controller('ExampleController', ['$scope',
      function($scope) {
        $scope.title = 'Lorem Ipsum';
        $scope.link = 'https://google.com';
        $scope.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';
      }
    ]);
})(window.angular);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

<body ng-app="multiSlotTranscludeExample">
  <style>
    .title,
    .footer {
      background-color: gray
    }
  </style>
  
  <div ng-controller="ExampleController">
    <input ng-model="title" aria-label="title">
    <br/>
    <textarea ng-model="text" aria-label="text"></textarea>
    <br/>
    <div pane>
      <pane-title>
        <a ng-href="{{link}}" ng-bind="title"></a>
      </pane-title>
      <pane-body>
        <p ng-bind="text"></p>
      </pane-body>
    </div>
  </div>
</body>

属性指令可以转换吗？

1 个答案: