0

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

我离 Angular 专家还差得很远，但我能找到的是，它是 Angular 中的一个错误/异常事故，其中 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

4

1 回答 1

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);
        })
      }
    }
  };
});

工作计划

于 2015-03-25T16:40:44.550 回答