jquery-steps进入angularjs指令

Question

我正在研究我的第一个angularjs指令。 我希望将jquery-steps（ https://github.com/rstaib/jquery-steps ）包装成一个指令。 当我尝试将步骤内容中的输入或表达式绑定到它们未绑定的控制器模型时，我的问题出现了。 我的示例代码如下。

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>

名称为{{user.name}}的内容输出为步骤1中的内容

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

编辑：我添加了一个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)
    }
])

Answer 2

感谢Hugo Mallet和Nigel Sheridan-Smith。 但是，如果要包含事件处理，这是一个更简单的方法。

.directive("uiWizardForm", function()
{
    var scope;

    return {
        restrict: "A",
        controller:function($scope){
            scope = $scope;
        },
        compile: function($element){
            $element.wrapInner('<div class="steps-wrapper">')
            var steps = $element.children('.steps-wrapper').steps({
                onStepChanging: function (event, currentIndex, newIndex)
                {
                    return scope.onStepChanging();
                },
                onFinishing: function (event, currentIndex)
                {
                    return scope.onFinishing();
                },
                onFinished: function (event, currentIndex)
                {
                    scope.finishedWizard();
                }
            });
        }
    };
});

PS。 如果已经在模板中添加了wrapInner，则无需使用wrapInner。

Answer 3

根据Hugo的回答，如果你还想使用jQuery步骤事件处理，你应该这样做（使用Coffeescript）：

.directive('uiWizardForm', ['$compile', ($compile) ->
return {
    scope: {
        stepChanging: '&',
        stepChanged: '&',
        finished: '&'
    },
    compile: (tElement, tAttrs, transclude) ->
      tElement.wrapInner('<div class="steps-wrapper">')
      steps = tElement.children('.steps-wrapper').steps({})

      return {
        pre: (scope, ele, attrs) ->

        post: (scope, ele, attrs) ->
          # Post-link function

          ele.children('.steps-wrapper').on 'stepChanged', () ->
            scope.$apply ->
              return scope.stepChanging() if tAttrs.stepChanging?
              true

          ele.children('.steps-wrapper').on 'finished', () ->
            scope.$apply ->
              scope.finished() if tAttrs.finished?

          ele.children('.steps-wrapper').on 'stepChanging', () ->
            scope.$apply ->
              scope.stepChanging() if tAttrs.stepChanging?
              true

      }
  }
])

然后，您可以将事件处理程序附加到指令的范围...例如：

<ui-wizard-form step-changing='stepChanging()'>映射到$scope.stepChanging(...) ->函数。

Answer 4

link: function(scope, elem, attrs){
    elem.wrapInner(_handler.generateTemplate());

    var _steps = elem.children('.vertical').steps({
            headerTag: 'h1',
            bodyTag: 'div'
          });

    $compile(_steps)(scope);
  }

这是关于Plnkr完整解决方案的。

Answer 5

AngularJS的官方网站提供了有关创建自定义指令的分步教程 。 我相信如果您完成本教程，您的问题将得到解决。 特别请注意“隔离范围”和“模板”。 我想这两个问题与你的问题非常相关。 祝好运！