Javascript jquery逐步进入angularjs指令

我正在编写我的第一个angularjs指令。我希望将jquery步骤（）包装成一个指令。 当我试图将步骤内容中的输入或表达式绑定到它们不绑定的控制器模型时，我的问题就出现了。下面是我的示例代码

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}
步骤2
高级信息等

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

我仍然是angular的初学者，所以我似乎无法理解为什么内容区域没有范围或模型。任何提示或线索，让我在正确的轨道将是非常有帮助的

---

编辑：我添加了一个plnkr来显示我的尝试

AngularJS的官方网站提供了一个循序渐进的过程。我相信，如果您按照教程进行操作，您的问题将得到解决。请特别注意“隔离范围”和“模板”。我想这两个问题与你的问题非常相关。

---

祝你好运

以下内容解决了我项目中的此问题：

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

.directive（'uiWizardForm'，['$compile'，（$compile）->
返回{
链接：（范围，ele）->
元素wrapInner（“”）
steps=ele.children（'.steps包装器'）.steps（）
$compile（步骤）（范围）
}
])

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

.directive（'uiWizardForm'，['$compile'，（$compile）->
返回{
范围：{
步骤更改：“&”，
步骤更改：“&”，
已完成：“&”
},
编译：（远程通讯、tAttrs、转移）->
远程服务。包装商（“”）
steps=tElement.children（'.steps包装器'）.steps（{}）
返回{
前置：（范围、要素、属性）->
post：（范围、要素、属性）->
#后链接功能
ele.children（“.steps wrapper”）。在“stepChanged”上，（）->
范围。$apply->
如果tAttrs.stepChanging，则返回scope.stepChanging（）？
真的
ele.children（“.steps wrapper”）。在“finished”上，（）->
范围。$apply->
scope.finished（）如果tAttrs.finished？
ele.children（'.steps wrapper'）。关于'stepChanging'，（）->
范围。$apply->
scope.stepChanging（）如果是tAttrs.stepChanging？
真的
}
}
])

然后可以将事件处理程序附加到指令上的作用域。。。e、 g:

映射到

$scope.stepChanging（…）->

函数

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

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

    $compile(_steps)(scope);
  }

---

这是完整的解决方案。

感谢雨果·马利特和奈杰尔·谢里丹·史密斯。 但是，如果您想包含事件处理，这里有一个更简单的方法

.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();
                }
            });
        }
    };
});

指令（“uiWizardForm”，函数（） { var范围； 返回{ 限制：“A”， 控制器：功能（$scope）{ scope=$scope； }, 编译：函数（$element）{ $element.wrapInner（“”） var steps=$element.children（'.steps包装器'）.steps({ onStepChanging:函数（事件、currentIndex、newIndex） { 返回scope.onStepChanging（）； }, onFinishing：函数（事件、当前索引） { 返回scope.onFinishing（）； }, onFinished：函数（事件、当前索引） { scope.finishedWizard（）； } }); } }; });

---

另外，如果已经在模板中添加了，则不需要使用包装器。

是否出现控制台错误？您确实没有显示足够的代码来显示问题。任何与angular之外的代码作用域的交互都需要使用

$apply（）

@pankajparkar我没有收到控制台错误。@charlietfl我没有与angular之外的作用域发生冲突。当指令运行时。它接受元素中的内容并从jquery步骤中创建并应用.steps（）方法。由于某些原因，从jquery步骤生成的向导没有使用范围进行绑定。它是逐字输出名称：{{user.Name}}当这种情况发生时，它意味着它没有经过angula

$compile

，因此您需要使用

$compile（）

yourselfhey@hugo mallet，您能解释一下这个解决方案的细节吗？谢谢，顺便说一句！您的示例对我来说效果很好，我只是想问一下，如果要用执行一些代码的按钮替换分页链接，如何使用scope变量加载下一步$scope.steps.NextStep

.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();
                }
            });
        }
    };
});