Question

我有一个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指令在渲染时只有＆＃34; {{passThrough.value1}}＆＃34;作为div标签内的文本，它实际上并没有编译角度对象并返回其值。

在Chrome中进行调试时，我可以看到角度对象＆＃39; passThrough＆＃39;在链接函数的scope参数中。

我知道我需要在link函数中做一些事情来编译和渲染指令，但是我无法找到它需要的东西。

我需要的只是一个简单的＆＃39;你需要使用它......＆＃39;我将从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);
        }
};

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

1 个答案: