如何使用$ 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小提琴链接：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;
}]);

我不确定你想做什么。

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