AngularJS指令，在post链接函数中传递范围对象

Question

我有一个HTML模板，我正在将其用于角度指令。在编译HTML模板后，我需要在HTML模板上触发一些javascript(我需要触发jQuery步骤以使HTML成为向导)

示例指令 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 类似于

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

我的问题是 HTML 指令在呈现时，只是将"{{passThrough.value1}}"作为div 标签中的文本，它实际上并没有编译角度对象并返回其值。

在Chrome 中调试时，我可以在链接函数的 scope 参数中看到角度对象"直通"。

我知道我需要在链接函数中做一些事情来编译和呈现指令，但我找不到需要什么。

我所需要的只是一个简单的"你需要使用它......"。我将从 Angular 文档中找出如何做到这一点。

基本上，假设passThrough.value1 = Test Value，我需要我的指令HTML编译成

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

然后，我需要在角度对象呈现后在 HTML 上运行 jQuery 步骤函数

p.s. scope.bindAccountDirective() 函数是用于触发 jQuery 步骤的包装器方法。

$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) { }
});
}

更新的解决方案

在链接功能中使用$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);
}
};

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