jquery-steps进入angularjs指令

我正在研究我的第一个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看起来如下

 
 
 
 Step 1 
 
Name: {{user.name}}
 
 Step 2 
 
 Advanced Info etc
 
  

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

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

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

Answer 1

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

 .directive('uiWizardForm', ['$compile', ($compile) -> return { link: (scope, ele) -> ele.wrapInner('
') 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('
') 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('
') 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 } } ]) 

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

映射到$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的官方站点提供了有关创建自定义指令的分步教程 。 我相信如果你按照教程进行操作，你的问题就会得到解决。 特别请注意“隔离范围”和“模板”。 我想这两个问题与你的问题非常相关。 祝好运！