angularjs – 重复Angular中的转换 – 访问当前项目的最佳实践？

发布时间：2020-12-17 10:22:39 所属栏目：安全来源：网络整理

导读：我写了以下指令： transclude: true,scope: { items: '=' }...div class="row" ng-repeat="item in items" div class="col-xs-9" ng-transclude/ng-transclude /div/div 使用此指令时,执行以下操作是合法/良好的做法吗？ cakes = [ { name: 'blueberry chees

我写了以下指令：

transclude: true,scope: { items: '=' }
...
<div class="row" ng-repeat="item in items">
  <div class="col-xs-9">
    <ng-transclude></ng-transclude>
  </div>
</div>

使用此指令时,执行以下操作是合法/良好的做法吗？

cakes = [ { name: 'blueberry cheesecake',color: 'blue' },{ name: 'rocky road',color: 'mostly brown' } ]
...
<custom-list items="cakes">
  <h5>{{$parent.item.name}}</h5>
</custom-list>

我特别谈到$parent.方面.

Angular已经认识到更灵活的ng-transclude将是有益的：

https://github.com/angular/angular.js/issues/5489

建议的解决方法之一是为ng-transclude定义自己的覆盖,允许您执行以下操作：

<div ng-transclude="sibling"></div> <!-- Original behaviour -->
<div ng-transclude="parent"></div> <!-- Takes from where transclusion happens -->
<div ng-transclude="child"></div> <!-- Takes from where transclusion happens,but creates a new child scope -->

自定义ng-transclude的来源：

.config(function($provide){
    $provide.decorator('ngTranscludeDirective',['$delegate',function($delegate) {
        // Remove the original directive
        $delegate.shift();
        return $delegate;
    }]);
})

.directive( 'ngTransclude',function() {
  return {
    restrict: 'EAC',link: function( $scope,$element,$attrs,controller,$transclude ) {
      if (!$transclude) {
        throw minErr('ngTransclude')('orphan','Illegal use of ngTransclude directive in the template! ' +
         'No parent directive that requires a transclusion found. ' +
         'Element: {0}',startingTag($element));
      }

      var iScopeType = $attrs['ngTransclude'] || 'sibling';

      switch ( iScopeType ) {
        case 'sibling':
          $transclude( function( clone ) {
            $element.empty();
            $element.append( clone );
          });
          break;
        case 'parent':
          $transclude( $scope,function( clone ) {
            $element.empty();
            $element.append( clone );
          });
          break;
        case 'child':
          var iChildScope = $scope.$new();
          $transclude( iChildScope,function( clone ) {
            $element.empty();
            $element.append( clone );
            $element.on( '$destroy',function() {
              iChildScope.$destroy();
            });            
          });
          break;
      }
    }
  }
})

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!