带有弹出式窗口的角度路由器

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 FAQ

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（）方法返回模态的承诺。如果你愿意，你可以将这个承诺存储在工厂中，由另一种方法返回，以便另一个控制器或服务可以根据模式的结果采取行动。