angular.js - 关于angular路由的问题

问题描述

问 题

当我打开页面的时候，会自动执行我写的一个canvas动画，但是我点击其他路由导航，然后再点击回来，就不执行canvas动画了，只是加载了一个页面，没有重新执行加载这个页面的controller，请问怎么能实现每次切换路由页面都能从新加载一次这个页面的controller，（新手第一个demo，请多关照）

页面代码

<div>
    <canvas id="canvas"  class="lineCanvas">
        当前浏览器不支持Canvas，请更换浏览器后再试
    </canvas>
</div>

controller代码

mainApp.controller('InsuranceAddController', ['$scope', '$location', function($scope, $location) {

//      $scope.gotoList = function() { 
//          $location.path('/list.do');
//      };
    window.onload = function() {
        var winWidth = document.body.clientWidth;
        var canvas = document.getElementById("canvas");
        canvas.width = winWidth;
        canvas.height = 300;

        var context = canvas.getContext('2d');
        context.lineWidth = 1;
        context.strokeStyle = "#fff";
        //曲线
        
        context.beginPath();
        context.moveTo(0, 170);
        context.bezierCurveTo(260, 132, 175, 43, 386, 179);

        context.moveTo(717, 184);
        context.bezierCurveTo(559, 2, 524, 237, 386, 179);

        context.moveTo(717, 184);
        context.bezierCurveTo(898, 382, 937, 17, 1126, 194);

        context.moveTo(1362, 87);
        context.bezierCurveTo(1316, 193, 1227, 280, 1126, 194);
        context.stroke();
        context.closePath();
        
        //直线
        var $slidLine = 0;
        function begin(){
            $slidLine ++ ;
            console.log($slidLine);
            if($slidLine == winWidth){
                clearInterval(timer);
            }
        }
        var timer = setInterval(begin,1);
        
        function stroke(){
            context.beginPath();
            context.moveTo(10,142);
            context.lineTo($slidLine,142);
            context.stroke();
            context.closePath();
        }
        setInterval(stroke,1);

    }
}]);

解决方案

你的 canvas 逻辑是监听 window.onload 执行的，只有在第一次进入（浏览器刷新）才能依赖此机制。之后由路由机制的 transition 是不会触发该事件的。去掉这个监听，直接写在 controller 里就可以了。

当然最好还是封装为 directive，controller 里不适合做这类事情

这篇关于angular.js - 关于angular路由的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！