Question

当路由为 / registration 或 / login 时，我想调用服务modalService和函数setLoginModal。

所以当路由改变时，我需要获得由modalService调用的start.html视图和模态。

(function () {
    'use strict';

    var myApp = window.angular.module('myApp', ['ngRoute', 'ui.bootstrap']);

    myApp.config(['$routeProvider', function ($routeProvider) {
        $routeProvider.when('/home', { templateUrl: 'views/start.html' });
        $routeProvider.when('/registration', { templateUrl: 'views/start.html'});
        $routeProvider.when('/login', { templateUrl: 'views/start.html' });
        $routeProvider.otherwise({ redirectTo: '/home' });
    }]);
})();

服务是：

(function (app) {
    'use strict';

    app.factory('modalService', ['$modal',
    function ($modal) {

        function setLoginModal() {
            $modal.open({
                templateUrl: 'partials/loginModal.html',
                controller: 'loginController',
                size: 'sm',
                backdrop: 'static'
            });
        };

        return {
            setLoginModal: setLoginModal
        };
    }]);
})(angular.module('myApp'));

Answer 1

...
$routeProvider.when('/registration', { templateUrl: 'views/start.html', controller: 'authController' });
$routeProvider.when('/login', { templateUrl: 'views/start.html', controller: 'authController' });
...

和

myApp.controller('authController', function (modalService) {
    modalService.setLoginModal();
});

您还可以创建执行相同操作的modalSummon指令，并将其包含在您选择的视图模板中。请注意多个模态调用和零星模板重新编译。

Answer 2

调用这些路由时，可以通过几种不同的方式调用此服务。

最简单的可能是将它注入到那些视图中加载的控制器中并从那里调用它，无论是从路由控制器中还是在/ registration和/ login视图中的ng-controller指令，如{{1喜欢：

<div ng-controller="LoginCtrl"></div>

另一种方法，（如果你在特定的＆＃34;从＆＃34;和＃34;到＃34;路径路径上构建逻辑，那可能只会有意义）将是一个观察声明在全局控制器中，如果路径更改与您的流匹配，则调用它：

myApp.controller('LoginCtrl', function (modalService) {
  modalService.setLoginModal();
});

这两种方法都可能有它们的位置，但我认为你最好能够重新思考你的问题，而是建立一个＆＃34; authLauncher＆＃34;完成你正在尝试做的所有事情的指令，将你的工厂逻辑转移到所述指令中。

定义/更改路由时调用服务

2 个答案: