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

Question

我需要在指令渲染后调用一个函数。实际上我尝试使用 $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 Link: https://jsfiddle.net/bagya1985/k64fyy22/1/

Answer 1

这是一个working fiddle.

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

HTML:

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

指令：

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

Answer 2

试试这个？简单明了

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

我不太确定你想做什么。

如果你想让属性指令访问元素的范围（如示例中的第二个警告框所示），我认为没有优雅的方法。一种方法是使用 scope.$$childHead，它可以工作，但是以 $$ 为前缀的变量是 angular 内部变量，一般来说我们不应该使用它们。

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

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

javascript

jquery

jsfiddle

angularjs

HTML

JS

更新

HTML

JS