如何在使用$timeout进行指令渲染后调用控制器方法

How to call the controller method after directive render using $timeout?

本文关键字：指令 调用 方法 控制器 timeout      更新时间：2023-09-26

指令呈现后，我需要调用一个函数。实际上我试过使用$timeout函数。但它不起作用。

HTML Code:
<div ng-app='myApp' ng-controller='module-menu-controller'>
    <layout-render></layout-render>
    <div after-grid-render="getGridObject()"></div>
</div>

JS代码：

var app = angular.module("myApp", []);
app.controller("module-menu-controller", function($scope, $compile) {
        $scope.getGridObject = function() {
            alert("After render");
        };
    });
app.directive("layoutRender", function() {
    return {
        restrict : "E",
        template : "<h1>Testing</h1>"
    };
});
app.directive('afterGridRender', ['$timeout', function ($timeout) {
        var def = {
            restrict: 'A',
            terminal: true,
            transclude: false,
            link: function (scope, element, attrs) {
                $timeout(scope.$eval(attrs.getGridObject),0);  //Calling a scoped method
            }
        };
        return def;

}])；

JS Fiddle链接：https://jsfiddle.net/bagya1985/k64fyy22/1/

这是一把正在工作的小提琴。

只需在具有以下功能的指令上添加一个属性：

HTML:

<div after-grid-render fnc="getGridObject()"></div>

指令：

$timeout(scope.$eval(attrs.fnc),0);

试试这个？简单清晰的

HTML

<div ng-app='myApp' ng-controller='module-menu-controller'>
    <grid after-grid-render="getGridObject"></grid>
</div>

JS

var app = angular.module("myApp", []);
app.controller("module-menu-controller", function($scope) {
        $scope.getGridObject = function() {
            alert("After render");
        };    
});
app.directive("grid", function($timeout) {
    return {
        restrict : "E",
        template : "<h1>Testing</h1>",
        scope:{
            afterGridRender:'='
        },
        link: function (scope, element, attrs) {
                $timeout(scope.afterGridRender(),0);  //Calling a scoped method
          }
    };
});

JSFiddle：https://jsfiddle.net/6o62kx3e/

更新

你的意思是你想让它成为一种属性吗？

这个怎么样：https://jsfiddle.net/rt747rkk/

HTML

<div ng-app='myApp' ng-controller='module-menu-controller'>
    <my-directive a='5' after-grid-render="getGridObject"></my-directive>
</div>
<script type="text/ng-template" id="myDirectiveTemplate.html">
   <div> {{a}} {{b}} </div>
</script>

JS

var app = angular.module("myApp", []);
app.controller("module-menu-controller", function($scope) {
        $scope.getGridObject = function() {
            alert("After render");
        };    
});

app.directive('myDirective',  function () {
        return {
            restrict: 'E',
                replace: true,
            templateUrl:"myDirectiveTemplate.html",
            scope:{
                    a:'='
            },
            link: function (scope, element, attrs) {
                    scope.b=123;
                scope.gridObject="my grid object here";
            }
        };
});
app.directive('afterGridRender', ['$timeout', function ($timeout) {
        var def = {
            restrict: 'A',
            transclude: false,
            link: function (scope, element, attrs) {
                $timeout(function(){
                    scope.getGridObject();
                  alert(scope.$$childHead.gridObject);
                });
                        }
        };
        return def;
}]);

我真的不确定你想做什么。

如果您希望attribute指令访问元素的作用域（如示例中的第二个警告框所示），我认为没有一种优雅的方法。一种方法是使用scope.$$childHead，它有效，但前缀为$$的变量是有角度的内部变量，一般来说我们不应该使用它们。

相关文章：