Question

大家好我需要了解在ngRoute加载templateURL后我可以做什么来加载脚本。我需要在该页面加载templateUrl文件html后实例化两个滑块。

我使用angularJs和ngRoute。我认为控制器在HTML完成之前执行以加载模板文件。

我有这段代码：

app.config(function($routeProvider){
//set route
    $routeProvider
    .when('/', {
        templateUrl: 'page/configurator.html',
        controller: 'mainController'        
    })
    .otherwise({
        redirectTo:'/'
    })
}); 
app.controller('mainController', function($scope){
    //data for main=configurator controller    
    //$scope.message="Everyone come and see how good I look! i am in MAIN=configurator page";
    $scope.pageTitle="SELECT THE ICE TYPES AND MAX DAILY PRODUCTS";    
    alert("test");
    $(window).trigger("resize");    
});

在我的页面中插入html后，我可以为运行脚本做些什么？

感谢 VR

Answer 1

后链接函数是指令渲染周期的最后一个阶段，它也从最内层元素调用到最外层元素。因此，您可以在顶级元素上使用它来检测angular何时呈现所有子指令（ng和其他）。

app.directive('onFinishRender', function ($timeout,$rootScope) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            $timeout(function () {
                $rootScope.$broadcast("hasFinishedRender");
            });
        }
    }
})


app.controller('mainController', function($scope){
    $scope.$on('hasFinishedRender',function(){
        // load script dynamically using any method
        var my_awesome_script = document.createElement('script');
        my_awesome_script.setAttribute('src','http://example.com/site.js');
        document.head.appendChild(my_awesome_script);
    });
});

您可能还需要一些逻辑来防止它在未来的摘要周期中多次触发。也假设角度1.x

在tempateURL之后加载脚本

1 个答案: