Question

尝试将jquery步骤转换为angularjs step指令，而step指令的html子级包含ng-repeat和ng-options却没有得到渲染。

我必须放置一个$ timeout服务组件以使step指令起作用（如下面的代码所述）。

var steps = ""
// $timeout(function(){
steps = angular.element(element).children('.steps-wrapper').steps({

    onStepChanging: function (event, currentIndex, newIndex){
        if (currentIndex == 0) {
            return true
        }else if (currentIndex == 1) {
            return true
        }else if (currentIndex == 2) {
            return true
        }
    }
})
// })

$compile(steps)(scope)

html网站** /

<div step class="">
    <div id="checkout" class="cui-wizard steps-wrapper">
    <h3>
        <i class="icmn-cart5 wizard--steps--icon"></i>
        <span class="wizard--steps--title">Cart</span>
    </h3>
    <section>
        ...
        <table>
            <tbody>
                <tr ng-repeat="(x, y) in vm.cart.getCart().items">
                    <td class="text-center">{{x+1}}</td>
                </td>
            </tbody>
        </table>
        ...
    </section>
</div>

用于测试的Plugunkr链接。
plunkr

请检查步骤3，循环未在步骤指令中呈现。但是请运行在步骤指令之外。

Answer 1

compile: function(tElm, tAttrs, transclude) {
    tElm.wrapInner('<div class="wizard"></div>')
    tElm.children('.wizard').steps(_stepsConfig_1)

    return {
      pre: (scope, elm, attrs) =>{},
      post: (scope, elm, attrs, ctrl)=>{
        elm.children('.wizard').on('stepsOrientation', ctrl.stepsOptions.stepsOrientation)

        elm.children('.wizard').on('stepChanging', ctrl.stepsOptions.stepChanging)

        elm.children('.wizard').on('stepChanged', ctrl.stepsOptions.stepChanged)

        elm.children('.wizard').on('cancel', ctrl.stepsOptions.stepCanceled)

        elm.children('.wizard').on('finishing', ctrl.stepsOptions.stepFinishing)

        elm.children('.wizard').on('finished', ctrl.stepsOptions.stepFinished)
      }
    }
  },
...

首先编译jQuery步骤，然后再编译Angularjs

working solution

AngularJS步骤指令不适用于ng-repeat指令

html网站** /

1 个答案: