帶有彈出式窗口的角度路由器

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（）方法返回模態的承諾。如果你願意，你可以將這個承諾存儲在工廠中，由另一種方法返回，以便另一個控制器或服務可以根據模式的結果採取行動。