angularjs - 来自任何州的开放式模态

时间:2015-09-28 12:09:21

标签: angularjs modal-dialog angular-ui-router angular-ui-router-extras

我想从任何州访问 nav.profiles.modal 模式。 目前我有以下结构:

  • NAV
  • nav.activity
  • nav.profiles
  • nav.profiles.modal

它是在nav.profiles上工作的,它是在不同的ui视图上打开的。 但是如何从任何状态打开这个模态作为叠加?

我能用ui-router-extras解决这个问题吗?

感谢。

编辑:解决了! 每个人都需要这个:

    var app = angular.module('plunker', ['ui.router', 'ui.bootstrap']);

app.config(function($stateProvider, $urlRouterProvider){
  $urlRouterProvider.otherwise("/");
  $stateProvider
  .state('index', {
    url: '/',
    template: '<h2>Hello world</h2>'
  })
  .state('terms', {
    url: '/terms',
  })
})

/**
 * Use a run block to ensure the modal will open from anywhere in the app.
 **/
app.run(function ($rootScope, $modal) {
  /**
   * Listen to the `$stateChangeStart` event
   */
  $rootScope.$on('$stateChangeStart', function (event, toState) {
    /**
     * if the new state is not "terms", then ignore it
     */
    if(toState.name !== 'terms') return;
    /**
     * Open the modal window
     */
    $modal.open({
        template: [
        '<div class="modal-content">',
          '<div class="modal-header">',
            '<h3 class="modal-title">Regulamin</h3>',
          '</div>',
          '<div class="modal-body">',
          '$1. Give us all your money!',
          '</div>',
          '<div class="modal-footer">',
            '<button class="btn btn-primary" ng-click="$dismiss()">OK</button>',
          '</div>',
        '</div>'
        ].join(''),
        controller: function($scope){
          // Do whatever you need here.
        }
      });
    /**
     * Prevent the transition to the dummy state, stay where you are
     */
    event.preventDefault();
  })
})

http://jsfiddle.net/dwmkerr/8MVLJ/

0 个答案:

没有答案