AngularJS：ngRepeat范围在具有隔离范围和ngTransclude的自定义指令中失败

Question

我根据JQuery Steps插件做了一个自定义指令（“向导”）。 但是我在指令中使用ngRepeat时遇到了问题。 指令使用ngTransclude，因此我可以在页面标记内提供步骤内容。

我远没有Angular专家，但是我能找到的是这是Angular中的一个bug / freakaccident，其中ngRepeat在具有隔离范围和包含范围的指令内使用。 就像这里提到的https://github.com/angular/angular.js/issues/7874，但是我似乎无法获得任何建议：

该指令如下所示：

Directives.wizard = ['$compile', function ($compile) {
return {
    restrict: 'E',
    scope: {
        cancel: '&',
        finish: '&',
        stepChanged: '&'
    },
    template: '<div class="wizard" data-ng-transclude></div>',
    replace: true,
    transclude: true,
    link: function ($scope, element, attrs, ctrl) {
        // directive has to be wrapped in order to ngModel on sections to work with transclude: true
        element.wrapInner('<div class="steps-wrapper">');

        var opts = {
            headerTag: "h3",
            bodyTag: "section",
            transitionEffect: "slideLeft",
            onCanceled: function (event, currentIndex) {
                $scope.cancel();
            },
            onFinished: function (event, currentIndex) {
                $scope.finish();
            },
            onStepChanged: function (event, currentIndex) {
                $scope.stepChanged();
            }
        };

        var stepsEl = element.children('.steps-wrapper').steps(opts);

        // wrap 'n compile..
        $compile(stepsEl)($scope);
    }
};}];

标记

<wizard>
<h3>Title</h3>
<section>
    <p><DG:TextControl runat="server" Key="MineSuccesHistorier.Step1"/></p>
    <input data-ng-model="$parent.newData.Title"></input> <!-- outputs array just fine -->

    <!-- test stuff here -->
    <!-- 1. regular ng-repeat - doesnt work (also tried with $parent.$parent which Batarang says is the correct path -->
    <ul>
        <li data-ng-repeat="item in $parent.newData.Competences">{{item.Title}}</li>
    </ul>

    <!-- 2. try with ng-init - doesnt work -->
    <ul data-ng-init="comp = $parent.newData.Competences">
        <li data-ng-repeat="item in comp">{{item.Title}}</li>
    </ul>
</section>

<h3>Tab</h3>
<section>
    <!-- next wizard tab here -->
</section>                

如何在控制器中设置数据

$scope.newData = {
"Competences": [
    {
        "IsSelected": true,
        "Title": "Hest"
    },
    {
        "IsSelected": false,
        "Title": "Kat"
    },
    {
        "IsSelected": true,
        "Title": "Ko"
    },
    {
        "IsSelected": false,
        "Title": "Ged"
    }
],
"Id": "905c1285-d58b-4f65-8df5-52986c70a820",
"Situation": null,
"Title": null}

任何想法都非常感谢，在此先感谢！

更新25/3：在此处添加了plnkr http://plnkr.co/edit/kNl4UEoUa7zU4CgWaGSa?p=preview当我在指令中添加隔离范围时，转发器将停止工作。 如果我不考虑隔离范围，则好像ngRepeats已被编译多次。

更新2 25/3：使用Vinays编译建议添加了新的plunkr-ng-repeat现在仅编译一次。 但是在控制器范围内与ngModel进行双向绑定不起作用http://plnkr.co/edit/TR3XxvV4IYI66h4pY5hx?p=preview

Answer 1

内容越来越重复，因为ng-repeat将一次编译内容，而$compile将再次编译它。

指示

app.directive('wizard', function($timeout, $compile) {   
  return {
    restrict: 'E', 
    replace: true,
    template: '<div class="mywizard"></div>', 
    compile: function (tEl) {
      return function(scope, element, attrs) {
        var stepsEl;

        element.wrapInner('<div class="steps-wrapper">');
        element.children('.steps-wrapper').append(tEl.context.innerHTML);
        var content = $compile(element.contents())(scope);
        $timeout(function () {
          element.children('.steps-wrapper').steps(opts);
        })
      }
    }
  };
});

工作Plnkr