时间戳

首页 > 解决方案 > 加载指令后调用函数

angularjs - 加载指令后调用函数

问题描述

我正在研究 angular 1.6 的自定义指令

我想在我的指令加载后调用一个函数。有没有办法做到这一点？

我尝试了链接函数，但似乎链接函数是在加载指令之前执行的。

任何帮助将不胜感激。

这是我的指令代码

<pagination total-data= noOfRecords></pagination>

app.directive("pagination", [pagination]);

function pagination() {
    return {
        restrict: 'EA',
        templateUrl: 'template/directives/pagination.html',
        scope: {
            totalData: '=',
        },
        link: dirPaginationControlsLinkFn
    };
}

标签： angularjsangularjs-directive

解决方案

由于您使用的是 AngularJS V1.6，请考虑将指令设为组件：

app.component("pagination", {
    templateUrl: 'template/directives/pagination.html',
    bindings: {
        totalData: '<',
    },
    controller: "paginationCtrl"
})

并使用$onChanges和$onInit 生命周期钩子：

app.controller("paginationCtrl", function() {
    this.$onChanges = function(changesObj) {
        if (changesObj.totalData) {
            console.log(changesObj.totalData.currentValue);               
            console.log(changesObj.totalData.previousValue);                 
            console.log(changesObj.totalData.isFirstChange());
        };
    };
    this.$onInit = function() {
        //Code to execute after component loaded
        //...
    });
});

组件是指令结构，它们可以自动升级到 Angular 2+ 组件。它们使迁移到 Angular 2+ 更容易。

有关详细信息，请参阅

推荐阅读