Question

我试图在控制器解析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");
    }

}

Answer 1

我建议使用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");
        });
    }

}

Answer 2

您可以使用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");
    }    
}

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

2 个答案: