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}} です。

私はまだangularの初心者なので、コンテンツ領域にスコープやモデルが添付されていない理由を理解できないようです。私を正しい軌道に乗せるためのヒントやリードは非常に役に立ちます!

編集：私が試したことを示すためにplnkrを追加しました。http://plnkr.co/edit/y60yZI0oBjW99bBgS7Xd

4

5 に答える 5

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 に答える
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 に答える
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 の公式サイトでは、カスタム ディレクティブの作成に関する段階的なチュートリアルを提供しています。チュートリアルに従っていただければ、疑問は解決されると思います。特に「Isolated Scope」と「template」に注目してください。これら2つの問題は、あなたの質問に非常に関連していると思います。幸運を！

于 2014-08-05T21:53:18.087 に答える