Question

我正在开发一个应用程序，其中一个按钮触发一个方法，该方法将一个事件发送到其他地方。这很好用，但是我也想添加一个url来触发这个动作。

所以目前我的按钮看起来像这样

<a class="addJob" ng-click="addNewJob()" ng-controller="AddJobController"></a>

但我真正想要的只是

<a class="addJob" href="/new"></a>

现在，我无法弄清楚如何为此做路由。这意味着当我转到/new时，应该触发AddJobController。当我直接转到http://www.example.com/new时，它仍应正确加载页面并触发该操作。

我不想为此路线创建单独的页面，因为它是应用流程的重要组成部分。

（想想就像在trello.com上创建新笔记一样）

Answer 1

一个选项

如果您愿意转移到uiRouter，这是一种常见的模式。

直接从uiRouter常见问题解答中复制并粘贴

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-open-a-dialogmodal-at-a-certain-state

$stateProvider.state("items.add", {
url: "/add",
onEnter: ['$stateParams', '$state', '$modal', '$resource', function($stateParams, $state, $modal, $resource) {
    $modal.open({
        templateUrl: "items/add",
        resolve: {
          item: function() { new Item(123).get(); }
        },
        controller: ['$scope', 'item', function($scope, item) {
          $scope.dismiss = function() {
            $scope.$dismiss();
          };

          $scope.save = function() {
            item.update().then(function() {
              $scope.$close(true);
            });
          };
        }]
    }).result.then(function(result) {
        if (result) {
            return $state.transitionTo("items");
        }
    });
}]
})

第二个选项

第二个选项是启动模式控制器的构造函数。我已经包含了一个modalFactory。这是一种常见的模式。它允许您的模态可重用，并清理您的控制器。上面的uiRouter示例也应该使用工厂模式来从状态配置中抽象出模态设置。

此示例适用于ngRouter。

app.controller('addJobModalController', ['modalFactory', function(modalFactory) {

    modalFactory.addJob();

}]);



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

    return {
        addJob: function() {
            return $modal.open({
                templateUrl: 'views/addjob-modal.html',
                controller: 'AddJobController',
                size: 'md'
            });
        }
    }

}]);

addJob（）方法返回模态的承诺。如果需要，可以将此承诺存储在工厂中，以便通过其他方法返回，以便其他控制器或服务可以对模态的结果起作用。

角度路由器弹出窗口

1 个答案: