javascript - jquery-steps 进入 angularjs 指令

Question

我正在研究我的第一个 angularjs 指令。我希望将 jquery-steps ( https://github.com/rstaib/jquery-steps ) 包装到指令中。当我尝试将步骤内容中的输入或表达式绑定(bind)到它们未绑定(bind)的 Controller 模型时，我的问题就来了。下面是我所拥有的示例代码。

angular.module('foobar',[])
.controller 'UserCtrl', ($scope) ->
    $scope.user =
       name:'John Doe'

.directive 'wizardForm', () ->
   return {
      restrict: 'A',
      link: (scope, ele) ->
        ele.steps({})
    }

html 如下所示

<div ng-controller="UserCtrl">    

  <div class='vertical' wizard-form>
     <h1> Step 1 </h1>
     <div>Name: {{user.name}}</div>

     <h1> Step 2 </h1>
     <div> Advanced Info etc</div>
  </div>
</div>

步骤 1 中内容的输出是 姓名:{{user.name}}

我仍然是 Angular 的初学者，所以我似乎无法理解为什么内容区域没有附加范围或模型。任何让我走上正轨的提示或线索都会非常有帮助!

编辑:我添加了一个 plnkr 来展示我的尝试。 http://plnkr.co/edit/y60yZI0oBjW99bBgS7Xd

Answer 1

以下解决了我项目中的这个问题:

.directive('uiWizardForm', ['$compile', ($compile) ->
    return {
        link: (scope, ele) ->
            ele.wrapInner('<div class="steps-wrapper">')
            steps = ele.children('.steps-wrapper').steps()
            $compile(steps)(scope)
    }
])