Question

如何在以下情况下使用翻译。目的是在html（partials）文件中使用标记，而不是在模板中定义它（在指令中）。

我在这里找到了一个很棒的树指令。（source）原文：http://jsfiddle.net/n8dPm/

我没有在指令中定义模板，而是尝试使用已转换的内容。我还将Angular更新为1.2.0.rc2。更新：http://jsfiddle.net/aZx7B/2/

低于错误

TypeError：对象[object Object]的属性'$ transclude'不是a 功能

代码：

module.directive("tree", function($compile) {
    return {
        restrict: "E",
        transclude: true,
        scope: {family: '='},
        template:       
            '<ul>' + 
                '<li ng-transclude></li>' +
                '<li ng-repeat="child in family.children">' +
                    '<tree family="child"></tree>' +
                '</li>' +
            '</ul>',
        compile: function(tElement, tAttr) {
            var contents = tElement.contents().remove();
            var compiledContents;
            return function(scope, iElement, iAttr) {
                if(!compiledContents) {
                    compiledContents = $compile(contents);
                }
                compiledContents(scope, function(clone, scope) {
                         iElement.append(clone); 
                });
            };
        }
    };
});

<div ng-app="myapp">
    <div ng-controller="TreeCtrl">
        <tree family="family">
            <p>{{ family.name }}</p>
        </tree>
    </div>
</div>

编辑：

根据大卫的建议，做了一些改变。 http://jsfiddle.net/aZx7B/3/ 现在，它打印，父。改变，family - ＆gt; treeFamily虽然无法正常工作

Answer 1

您还需要在模板中输出系列的名称： http://jsfiddle.net/roadprophet/DsvX6/

module.directive("tree", function($compile) {
    return {
        restrict: "E",
        transclude: true,
        scope: {family: '='},
        template:       
            '<ul>' + 
                '<li ng-transclude></li>' +
                '<li ng-repeat="child in family.children">' +
                    '<tree family="child">{{family.name}}</tree>' +
                '</li>' +
            '</ul>',
        compile: function(tElement, tAttr, transclude) {
            var contents = tElement.contents().remove();
            var compiledContents;
            return function(scope, iElement, iAttr) {
                if(!compiledContents) {
                    compiledContents = $compile(contents, transclude);
                }
                compiledContents(scope, function(clone, scope) {
                         iElement.append(clone); 
                });
            };
        }
    };
});

修改

您还可以通过以下方式进行简化：http://jsfiddle.net/roadprophet/DsvX6/2/

<div ng-app="myapp"> <div ng-controller="TreeCtrl"> <tree family="treeFamily"> </tree> </div> </div> module.directive("tree", function($compile) { return { restrict: "E", transclude: true, scope: {family: '='}, template: '<ul>' + '<li ng-transclude></li>' + '<p>{{ family.name }}</p>' + '<li ng-repeat="child in family.children">' + '<tree family="child"></tree>' + '</li>' + '</ul>', compile: function(tElement, tAttr, transclude) { var contents = tElement.contents().remove(); var compiledContents; return function(scope, iElement, iAttr) { if(!compiledContents) { compiledContents = $compile(contents, transclude); } compiledContents(scope, function(clone, scope) { iElement.append(clone); }); }; } }; });

修改但问题的来源相同。没有模板传递给内部树指令。 http://jsfiddle.net/roadprophet/DsvX6/3/

<div ng-app="myapp"> <div ng-controller="TreeCtrl"> <tree family="treeFamily"> <p>{{ family.name }}</p> </tree> </div> </div> template: '<ul>' + '<li ng-transclude></li>' + '<li ng-repeat="child in family.children">' + '<tree family="child"><div ng-transclude></div></tree>' + '</li>' + '</ul>'

Answer 2

您希望针对父范围编译已转换的DOM;您可以使用指令控制器定义中的可注入$transclude函数自动执行此操作：

module.directive("tree", function($compile) {
  return {
    restrict: "E",
    transclude: true,
    scope: { family: '=' },
    template: '<ul>' + 
                '<li ng-repeat="child in family.children">' +
                  '<tree family="child">' +
                    '<p>{{ child.name }}</p>' +
                  '</tree>' +
                '</li>' +
              '</ul>',
    controller: function($element, $transclude) {
      $transclude(function(e) {
        $element.append(e);
      });
    },
    compile: function(tElement, tAttr, transclude) {
      var contents = tElement.contents().remove();
      var compiledContents;
      return function(scope, iElement, iAttr) {
        if(!compiledContents) {
          compiledContents = $compile(contents);
        }
        compiledContents(scope, function(clone) {
          iElement.append(clone);
        });
      };
    }
  };
});

这允许您在根模板中使用父范围属性treeFamily（还要注意在上面的指令模板中使用child）：

<div ng-app="myapp">
  <div ng-controller="TreeCtrl">
    <tree family="treeFamily">
      <p>{{ treeFamily.name }}</p>
    </tree>
  </div>
</div>

您可以在此处查看示例：http://jsfiddle.net/BinaryMuse/UzHeW/

Answer 3

参加聚会很晚。我需要这个用于项目，因此在深入研究并找到其他好的方法和方向之后，终于想到了：

与ng-transclude指令相同的代码，但是增加了context绑定，该指令每次更改时都会监视并设置在已包含的范围内。与ng-repeat相同，但这允许：

使用带有ng-repeat的自定义ng-transclude，而无需重写ng-repeat以及类似angular / 2模板输出的麻烦。
具有被包含内容的内容可在从父级接收直接上下文数据的同时继续访问祖父母范围。再次与模板出口相同。

增强的ng-transclude函数：

return function ngTranscludePostLink(
   ...
  ) {
  let context = null;
  let childScope = null;
  ...
  $scope.$watch($attrs.context, (newVal, oldVal) => {
    context = newVal;
    updateScope(childScope, context);
  });
  ...
  $transclude(ngTranscludeCloneAttachFn, null, slotName);
  ...
  function ngTranscludeCloneAttachFn(clone, transcludedScope) {
     ...                                 
     $element.append(clone);
     childScope = transcludedScope;
     updateScope(childScope, context);
     ...
  }
  ...
  function updateScope(scope, varsHash) {
    if (!scope || !varsHash) {
      return;
    }
    angular.extend(scope, varsHash);
  }
}

它的用法：

App

<my-list items="$ctrl.movies">
   <div>App data: {{ $ctrl.header }}</div>
   <div>Name:{{ name }} Year: {{ year }} Rating: {{ rating 
          }}</div>
</my-list>

MyList

<ul>
  <li ng-repeat="item in $ctrl.items track by item.id">
   <div>Ng repeat item scope id: {{ $id }}</div>
   <cr-transclude context="item"></cr-transclude>
  </li>
</ul>

可以找到完整的指令代码here on GitHub

Angularjs：transclude指令模板

编辑：

3 个答案: