4

我正在研究我的第一个 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>

步骤 1 中内容的输出为 Name: {{user.name}}

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

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

4

5 回答 5

4

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

.directive('uiWizardForm', ['$compile', ($compile) ->
    return {
        link: (scope, ele) ->
            ele.wrapInner('<div class="steps-wrapper">')
            steps = ele.children('.steps-wrapper').steps()
            $compile(steps)(scope)
    }
])
于 2014-08-07T12:37:10.557 回答
4

感谢 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，则不需要使用。

于 2016-01-18T09:24:14.377 回答
2

根据 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(...) ->函数。

于 2015-03-24T03:26:31.583 回答
2 
link: function(scope, elem, attrs){
    elem.wrapInner(_handler.generateTemplate());

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

    $compile(_steps)(scope);
  }

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

于 2015-06-23T23:36:26.777 回答
-2

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

于 2014-08-05T21:53:18.087 回答