AngularJSディレクティブ、ポストリンク機能でスコープオブジェクトを渡す

Question

私は角度指示に使用しているHTMLテンプレートを持っています。私は

（私はウィザードにHTMLを作るためにjQueryの手順を発射する必要があります）、それがコンパイルされた後にHTMLテンプレートにいくつかのJavaScriptを発射する必要があるサンプル・ディレクティブHTML：

<div class='example'>{{passThrough.value1}}</div> 

と私の角度指令は

app.directive('accountWizard', function() { 
return { 
    templateUrl: '../Scripts/angular/directives/templates/AccountWizard.html', 
    replace: true, 
    transclude: true, 
    scope: { 
     passThrough: "=" 
    }, 
    link: function (scope, elem, attr) { 
     scope.bindAccountDirective(); 
    } 
}; 

}です）。

メインページ内のHTMLは、私の問題は、レンダリングされたとき、単純にdivタグ内のテキストとして「{{passThrough.value1}}」はHTMLディレクティブということです

<account-wizard pass-through="angularObject"/> 

ようなものになるだろう実際には角度オブジェクトをコンパイルしてその値を返すわけではありません。

Chromeでデバッグすると、リンク関数のscopeパラメータに角度オブジェクト 'passThrough'が表示されます。

私は、リンク機能で命令をコンパイルしてレンダリングする必要があることは知っていますが、必要なものを見つけることはできません。

私が必要とするのは、「これを使用する必要があります」という簡単なことです。角度のあるドキュメントからどうやってそれを行うかを検討します。基本的には

、の passThrough.value1 = Test Valueを言わせて、私はHTMLが

<div class='example'>Test Value</div> 

にコンパイルし、その後、私はjQueryの角度オブジェクトのレンダリングされた後にHTMLに機能ステップ実行する必要が私の指示を必要とする

ps scope.bindAccountDirective（）関数は、jQueryのステップを実行するためのラッパーメソッドです。リンク機能で$timeout()を使用して

SOLUTION UPDATED

$scope.bindAccountDirective = function() { 

     $("#frmShippingAccount.wizard-big").steps({ 
      bodyTag: "fieldset", 
      transitionEffect: "slideLeft", 
      onStepChanging: function (event, currentIndex, newIndex) { 

       // Always allow going backward even if the current step contains invalid fields! 
       if (currentIndex > newIndex) { 
        return true; 
       } 

       var form = $(this); 

       // Clean up if user went backward before 
       if (currentIndex < newIndex) { 
        // To remove error styles 
        $(".body:eq(" + newIndex + ") label.error", form).remove(); 
        $(".body:eq(" + newIndex + ") .error", form).removeClass("error"); 
       } 

       // Disable validation on fields that are disabled or hidden. 
       form.validate().settings.ignore = ":disabled,:hidden"; 

       // Start validation; Prevent going forward if false 
       return form.valid(); 

      }, 
      onFinishing: function (event, currentIndex) { 

       var form = $(this); 

       // Disable validation on fields that are disabled. 
       // At this point it's recommended to do an overall check (mean ignoring only disabled fields) 
       form.validate().settings.ignore = ":disabled"; 

       // Start validation; Prevent form submission if false 
       return form.valid(); 
      }, 
      onFinished: function (event, currentIndex) { 

       var form = $("#frmShippingAccount"); 

       $("#savePrompt h1").text("Saving..."); 

       $scope.saveShippingAccount($scope.shippingAccount); 

      } 
     }).validate({ 
      framework: 'bootstrap', 
      icon: { 
       valid: 'glyphicon glyphicon-ok', 
       invalid: 'glyphicon glyphicon-remove', 
       validating: 'glyphicon glyphicon-refresh' 
      }, 
      errorPlacement: function (error, element) { } 
     }); 
} 

は完全に働きました。それはAngularJSがpassThroughオブジェクトを値としてレンダリングするのを待っており、そしてがbindAccountDirective()の機能を起動しました。

app.directive('accountWizard', function ($timeout) { 
    return { 
     templateUrl: '../Scripts/angular/directives/templates/AccountWizard.html', 
     replace: true, 
     scope: { 
      passThrough: "=" 
     }, 
     link: function (scope, elem, attr) { 
      $timeout(function(){ scope.bindAccountDirective() }, 0 false); 
     } 
}; 

Answer 1

リンク機能で$timeout()を使用すると、完全に機能しました。 AngularJSがpassThroughオブジェクトを値としてレンダリングするのを待ってから、bindAccountDirective()関数を起動しました。

app.directive('accountWizard', function ($timeout) { 
    return { 
     templateUrl: '../Scripts/angular/directives/templates/AccountWizard.html', 
     replace: true, 
     scope: { 
      passThrough: "=" 
     }, 
     link: function (scope, elem, attr) { 
      $timeout(function(){ scope.bindAccountDirective() }, 0 false); 
     } 
};