Question

我基于JQuery Steps插件制作了一个自定义指令（＆＃34;向导＆＃34;）。但是在我的指令中使用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： 添加了新的plunkr与Vinays编译建议 - 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);
        })
      }
    }
  };
});

Working Plnkr

AngularJS：ng重复范围在具有隔离范围和ng Transclude的自定义指令中失败

1 个答案: