jQuery的步骤变成angularjs指令 [英] jquery-steps into a angularjs directive

问题描述

我的工作我的第一angularjs指令。我希望能换行jQuery的步骤（ https://github.com/rstaib/jquery-steps）插入指令。
我的问题是当我尝试绑定的步骤里面的内容输入或前pression到控制器不绑定模式。什么，我有一个例子code如下。

I am working on my first angularjs directive. I was hoping to wrap jquery-steps (https://github.com/rstaib/jquery-steps) into a directive. My issue comes when I try to bind inputs or expression inside the content of the steps to controller models they don't bind. An example code of what I have is below.

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

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

的html格式的看起来如下：

The html looks as follows

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

The output for the content in step 1 is Name: {{user.name}}

我仍然具有角一个初学者，所以我似乎无法理解为什么没有连接到内容区域范围或模型。任何提示或线索，让我在正确的轨道将是非常有益！

I am still a beginner with angular so I cannot seem to understand why there is no scope or model attached to the content area. Any tips or leads to get me on the right track would be very helpful!

编辑：我添加了一个plnkr显示什么我都试过了。 http://plnkr.co/edit/y60yZI0oBjW99bBgS7Xd

I added a plnkr to show what I have tried. http://plnkr.co/edit/y60yZI0oBjW99bBgS7Xd

推荐答案

以下解决此问题，在我的项目：

The following resolved this issue in my project:

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

这篇关于jQuery的步骤变成angularjs指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！