相关疑难解决方法(0)

我需要在我的Angular应用程序中显示一个模态窗口(基本上只是一个隐藏的div,它将加载一个已编译的模板).问题是,我需要在模态打开时更改URL,以便用户可以复制链接并直接转到模态窗口,还可以使用后退按钮关闭模态窗口并返回上一页.这类似于Pinterest单击别针时处理模态窗口的方式.

到目前为止,我已经创建了一个加载模板的指令,使用$ compile编译它,注入$ scope,然后显示已编译的模板.这很好用.

问题是,只要我使用$ location更改路径,路由控制器就会触发并将模板加载到ng-view中.

我想到了两种克服这个问题的方法,但是还没能实现:

1. 当我使用$ location更改URL时,以某种方式阻止路由控制器触发.我已经为$ routeChangeStart添加了一个监听器来防止默认发生,但这似乎不起作用.

2. 以某种方式向页面添加另一个视图处理程序(在页面上基本上有2个命名的ng-view指令),并且每个都能够处理不同的路由.目前看不到Angular支持这一点.

URL必须是格式/ item/item_id而不是/ item？item_id = 12345.

任何帮助,将不胜感激.

我试图打开一个模式对话框采用了棱角分明的UI路由器作为解释在这里.

目标是可以在任何地方访问对话框,不一定需要URL,但如果我可以链接到打开对话框的页面,那将是很好的.

这是破碎的样本:

http://plnkr.co/edit/BLkYME98e3ciK9PQjTh5?p=preview

单击"菜单"应从任一页面打开对话框.

路由逻辑:

app.config(function($stateProvider,$locationProvider, $urlRouterProvider, modalStateProvider) {
  $urlRouterProvider.otherwise("/");
  $locationProvider.html5Mode(true);

  $stateProvider
    .state("app", {
      url: "",
      abstarct: true,
      views: {
        "" : {
          templateUrl: "main.html",
        },
        "header@app": {
          templateUrl: "header.html"
        },
        "footer@app":{
          templateUrl: "footer.html"
        }
      }
    })

    .state("app.home", {
      url: "/",
      templateUrl: "home.html",
    })
    .state("app.content", {
      url: "/content",
      templateUrl: "content1.html",
    });


  modalStateProvider.state("app.home.menu", {
    template: "I am a Dialog!",
    controller: function ($scope) {
      $scope.dismiss = function () {
        $scope.$dismiss();
      };
    }
  });
});

它不应该是"app.home"的孩子,因为我希望它可以从任何地方访问.我怎样才能做到这一点？

我正在使用此FAQ条目在某个州的子状态下打开模式对话框:https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-open-一个-dialogmodal-AT-A-一定状态

我的代码如下.当我打开模态对话框时,我需要访问父状态范围的属性.这可能吗？

plnkr:http://plnkr.co/edit/knY87n

         .state('edit', {
             url: '/{id:[0-9a-f]+}',
             views: {
                 '@': {
                     templateUrl: 'views/edit.html',
                     controller: 'editContr'
                 }
             }
         })
         .state('edit.item', {
             url: "/item/new",
             onEnter: function($stateParams, $state, $modal) {
                 $modal.open({
                     controller: 'itemEditContr',
                     templateUrl: 'views/edit-item.html',
                 }).result.then(function (item) {
                     //
                     // here I need to insert item into the items
                     // seen by my parent state. how?
                     //
                     $state.go('^');
                 }, function () {
                     $state.go('^');
                 });
             }
         });


function editContr($scope) {
    $scope.items = [{name: 'a'}, {name: 'b'}, {name: 'c'}];
} …

我正在尝试使用角度ui路线和角度ui模态制作状态模态.

假设我想填写一个包含4页的注册表单.所有这些页面都是模态的.

我能够在状态变化上打开模态.但之后我想在国家的基础上打开模态的每一页.

    $stateProvider.state('signup', {
  url: '/signup',
  template: '<ui-view />',
  abstract: true
})
.state('signup.modal', {
  url: '',
  resolve: {
    modalInstance: function($modal) {
      return $modal.open({
        template: '<div ui-view="modal"></div>',
        controller: 'signUp',
        windowClass: 'signup-edit-modal',
        backdrop: 'static'
      })
    }
  },
  onEnter: ['modalInstance', '$timeout', '$state',function(modalInstance,$timeout, $state) {
    modalInstance.opened.then(function(status){
      if(status){
        $timeout(function(){
          // changing color of background / backdrop of modal for signup
          angular.element('.reveal-modal-bg').css('backgroundColor','rgba(255, 255, 255, .9)');
        })
      }
    })
    $state.go('signup.welcome')
  }],
  onExit: function(modalInstance) {
    modalInstance.close('dismiss');
    angular.element('.reveal-modal-bg').css('backgroundColor','rgba(0, 0, 0, 0.45)');
  }
})
.state('signup.welcome', {
  url: "/welcome",
    views: …