如何在运行控制器代码后调用链接指令功能

Posted 2021-05-04

我试图在控制器解析http调用之后在链接函数中呈现代码，但在此之前调用链接函数。在$scope.menuhtml设置完成后如何调用链接？

HTML：

  <div id="testD" nav-menu-output="parseMenuJsonAndOutPutMenu()"></div>

指示：

return {
    restrict: 'A',
    controller: ['$scope', '$q','$http', function ($scope, $q,$http) {
        $http.get('ajax/menu' ).then(function (data) {
            $scope.menuHtml = generateHtmlMenu(data);
        });
    }],
    link: function(scope, element, attr) {
        var templateString = scope.menuHtml;
        var compiledTemplate = $compile(templateString)(scope);
        compiledTemplate.appendTo("#testD");
    }

}

答案

我建议使用scope.$watch()并重新运行您编译的模板代码。这样，您可以根据需要向菜单端点发出尽可能多的请求，并重新编译模板。

这里有关于手表的更多信息：http://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch

这是一个应该正常工作的更新版本：

return {
    restrict: 'A',
    controller: ['$scope', '$q','$http', function ($scope, $q,$http) {
        $http.get('ajax/menu' ).then(function (data) {
            $scope.menuHtml = generateHtmlMenu(data);
        });
    }],
    link: function(scope, element, attr) {
        scope.$watch('menuHtml', function() {
            var templateString = scope.menuHtml;
            var compiledTemplate = $compile(templateString)(scope);
            compiledTemplate.appendTo("#testD");
        });
    }

}

另一答案

你可以使用async: false来做到这一点

请尝试使用此代码而不是代码，

return {
    restrict: 'A',
    controller: ['$scope', '$q','$http', function ($scope, $q,$http) {    
     $http({
        method: 'GET',
        url: 'ajax/menu',
        async: false
    }).success(function (data) {
         $scope.menuHtml = generateHtmlMenu(data);
    })}],
    link: function(scope, element, attr) {
        var templateString = scope.menuHtml;
        var compiledTemplate = $compile(templateString)(scope);
        compiledTemplate.appendTo("#testD");
    }    
}