Question

在我的应用中，初始化我正在为每个页面添加一个类，如下所示：

$routeProvider
            .when ("/", {
                templateUrl : "views/login/login.html",
                controller  : "loginController",
                className   : "body-login" //class name for login page
        });

        $routeProvider
            .when ("/home", {
                templateUrl : "views/home/home.html",
                controller  : "homeController",
                className   : "body-home"  //class name for home page
        });

工作正常。问题是，我有条件模板加载directive。当用户点击链接更改页面时，directive不符合条件。

如果我手动刷新（页面加载后），directive工作正常。如何解决这个问题？

这是我的指示：

var galleryMenu = ['$route','$timeout', function ($route, $timeout) {

    var page = $route.current.className || 'body-home'; //navigating page not updating the class name. but refresh do the correct job

        return {

            replace : true,

            template : function () {

            return galleryMenuItem(page); //passing page here.

        },

        link : function (scope, element, attrs) {

            scope.galleryProject = function () {

                scope.galleryShow = !scope.galleryShow;
                scope.appsList = !scope.appsList;

                if(scope.galleryShow) {

                    $timeout(function () {
                        window.scrollTo(0,document.body.scrollHeight);
                    }, 10)

                }

            }


        }

    }

}];

angular
    .module("tcpApp")
    .directive('galleryMenu', galleryMenu);

我是否需要更改获取class名称的方式或者是否需要刷新页面加载？ - 我尝试使用页面加载方法，但没有工作。

这是我试过的代码：

    angular.module("tcpApp", ["ngRoute","ngResource", "ngAnimate"])

        .run(['$route', function ($route) {

            $route.reload(); //but not working!

        }])

My Template Function :

var galleryMenuItem = function (page) {

    var html = "";

    switch(page) {

        case 'body-home' :
            html += '<div class="galleryMenu"><a class="projects" ng-click="galleryProject(projects)">projects</a></div>';
            break;

        case 'body-projectSummary' :

            html += '<div class="galleryMenu"><a class="live" ng-click="galleryMenu(live)" href="#">live</a>'
            html += '<a class="visual" ng-click="galleryMenu(visual)" href="#">visuals</a>'
            html += '<a class="projects" ng-click="galleryProject(projects)">shows</a></div>';
            break;

    }

    return html;

}

Answer 1

您需要在$ routeChangeSuccess上执行此操作。但是，您需要对设置模板的方式进行轻微的设计更改。模板应该是一个html，您可以将类名绑定为模板中的表达式/范围变量。然后在$ routeChangeSuccess上使用该指令从当前路由获取类名并更新范围。然后模板会更新。

//psuedo code
scope.$on('$routeChangeSuccess',
  function(event, next, current) {
    $scope.classname = current.classname;
});

在路由更改时，`directive`没有获得`$ route`类名

1 个答案: