Geek Answers Handbook

Creating legacy modals in AngularJS with angular user interface and user interface

I am trying to make statefull modal using angular ui route and angular ui modal.

allows me to fill out a 4-page registration form. All of these pages are modal.

I can open a modal state change. But after that, I want to open every page of the modal based on the state.

    $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: {
      modal: {
        templateUrl: 'main/signup/welcome.html',
        controller: 'signupWelcome'
      }
    }
}).state('signup.step1', {
  url: "/step1",
    views: {
      modal: {
        templateUrl: 'main/signup/step1.html',
        controller: 'signupStep1'
      }
    }
})

the above code can open modal as well as change state to welcome, but for some reason the template does not load inside the modal. I assigned a template ui-view=modalthat it should open, but not.

Please help me. thanks in advance

+4
2

- . @Obi Onuorah , , . , .

angular -ui route https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names ui-view.

UI

    $stateProvider
  .state('list', {
    url: '/',
    template: '<ul><li ng-repeat="test in testObj"><a ui-sref="view({id: test.id})">{{ test.name }}</a></li></ul>',
    controller: function($scope) {
      $scope.testObj = testObj;
    }
  })
  .state('modal', {
    abstract: true,
    parent: 'list',
    url: '',
    onEnter: ['$modal', '$state', function($modal, $state) {
        console.log('Open modal');
        $modal.open({
          template: '<div ui-view="modal"></div>',
          backdrop: false,
          windowClass: 'right fade'
        }).result.finally(function() {
          $state.go('list');
      });
    }]
  })
  .state('view', {
    url: ':id',
    parent: 'modal',
    views: {
      'modal@': {
        template: '<h1>{{ test.name }}</h1><br />\
        <a ui-sref="edit({id: test.id})">Edit</a><br />\
        <a href="#" ng-click="$close()">Close</a>',
        controller: function($scope, test) {
          $scope.test = test;
        },
        resolve: {
          test: function($stateParams) {
            return testObj[$stateParams.id];
          }
        }
      }
    }
  })
  .state('edit', {
    url: ':id/edit',
    parent: 'modal',
    views: {
      'modal@': {
        template: '<h1>Edit {{ test.name }}</h1><br /> \
          <a ui-sref="view({id: test.id})">View</a> <br />\
          <a href="#" ng-click="$close()">Close</a>',
        controller: function($scope, test) {
          $scope.test = test;
        },
        resolve: {
          test: function($stateParams) {
            return testObj[$stateParams.id];
          }
        }
      }
    }
  });

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

+6

.

. , , . , , "" , ng-if ( ) ng-show ( ).

, .

+1

More articles:


All Articles