├── .eslintrc.json ├── .gitignore ├── .travis.yml ├── LICENSE ├── README.md ├── angular-ui-router-uib-modal.js ├── bower.json ├── build.txt ├── files.conf.js ├── gulpfile.js ├── index.d.ts ├── karma.conf.js ├── package.json ├── sample ├── app │ ├── app.js │ └── contacts │ │ ├── contacts-service.js │ │ ├── contacts.detail.html │ │ ├── contacts.detail.item.edit.html │ │ ├── contacts.detail.item.html │ │ ├── contacts.html │ │ ├── contacts.js │ │ └── contacts.list.html ├── assets │ └── contacts.json ├── common │ └── utils │ │ └── utils-service.js ├── css │ └── styles.css └── index.html ├── src └── angular-ui-router-uib-modal.ts ├── test └── angular-ui-router-modal.spec.ts ├── tsconfig.json └── tslint.json /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "eslint:recommended", 3 | "env": { 4 | "browser": true 5 | }, 6 | "rules": { 7 | "no-console": "error", 8 | "no-unused-vars": ["error", { "argsIgnorePattern": "^_" }], 9 | "semi": ["error", "always"], 10 | "block-scoped-var": "error", 11 | "eqeqeq": "error", 12 | "brace-style": ["error", "1tbs", { "allowSingleLine": true }], 13 | "space-before-function-paren": ["error", "never"], 14 | "space-in-parens": ["error", "never"], 15 | "comma-spacing": ["error", { "before": false, "after": true }] 16 | } 17 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 18 | .grunt 19 | 20 | # node-waf configuration 21 | .lock-wscript 22 | 23 | # Compiled binary addons (http://nodejs.org/api/addons.html) 24 | build/Release 25 | 26 | # Dependency directory 27 | node_modules 28 | 29 | # Optional npm cache directory 30 | .npm 31 | 32 | # Optional REPL history 33 | .node_repl_history 34 | src/**/*.js 35 | test/**/*.js 36 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "iojs" 4 | before_script: 5 | - export DISPLAY=:99.0 6 | - sh -e /etc/init.d/xvfb start 7 | - npm install -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Stepan Riha 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | angular-ui-router-uib-modal 2 | =========================== 3 | 4 | [![Build Status](https://travis-ci.org/nonplus/angular-ui-router-uib-modal.svg?branch=master)](https://travis-ci.org/nonplus/angular-ui-router-uib-modal) 5 | 6 | AngularJS module that adds support for ui-bootstrap modal states when using ui-router. 7 | 8 | Motivation 9 | ---------- 10 | 11 | Some RIAs using UI-Router use modal dialogs for certain application states. 12 | The [UI-Router's FAQ](https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-open-a-dialogmodal-at-a-certain-state), 13 | shows how to implement modal dialogs using [ui.bootstrap.modal](http://angular-ui.github.io/bootstrap/#/modal) service. 14 | While it works well, it requires a lot of boiler-plate code, complicates the state definition, and requires the state 15 | controller to be aware that its inside a `$uibModalInstance` to automatically close the dialog on a state change. 16 | 17 | This module gets rid of the boilerplate by adding support for a `modal: true` option in state definitions. 18 | This causes the state to be displayed via `$uibModal.open(...)` instead of within a ``. 19 | 20 | Installing the Module 21 | --------------------- 22 | Installation can be done through bower or npm: 23 | ``` shell 24 | bower install angular-ui-router-uib-modal 25 | ``` 26 | 27 | In your page add: 28 | ```html 29 | 30 | ``` 31 | 32 | Loading the Module 33 | ------------------ 34 | 35 | This module declares itself as `ui.router.modal`, so it can be declared as a dependency of your application as normal: 36 | 37 | ```javascript 38 | var app = angular.module('myApp', ['ng', 'ui.router', 'ui.bootstrap', 'ui.router.modal']); 39 | ``` 40 | 41 | Specifying modal states 42 | ----------------------- 43 | 44 | Adding a `modal: true` to a state definition causes its template to be opened through a call to 45 | `$uibModal.open(stateDefinition)` rather than embedding it inside of a ``. 46 | 47 | To specify which resolved state values are available to the modal controller, use an array instead of `true`, 48 | e.g. `modal: ['value1', 'value2']`. 49 | 50 | Inside the modal state controller, the modal via can be closed via `$uibModalInstance.close/dismiss()` or by 51 | transitioning to the parent state via `$state.go('^')`. 52 | 53 | 54 | ```javascript 55 | $stateProvider 56 | .state('contacts', { 57 | url: '/contacts', 58 | // ... 59 | }) 60 | .state('contacts.contact', { 61 | url: '/:contactId', 62 | modal: true, 63 | template: '
...', 64 | controller: function($scope, $state, contact) { 65 | $scope.close = function() { 66 | $state.go('^'); 67 | } 68 | }, 69 | resolve: { 70 | // Single contact 71 | contact: ['Contacts', '$stateParams', function(Contacts, $stateParams) { 72 | // Use Contacts service to retrieve a contact 73 | return Contacts.get({ id: $stateParams.contactId }); 74 | }] 75 | } 76 | }) 77 | ``` 78 | 79 | Caveats 80 | ------- 81 | 82 | **Modal does not have access to parent state's `$scope` values** 83 | 84 | The modal's `$scope` doesn't inherit anything from the parent state's scope. So any 85 | data that comes from the parent should be specified via `resolve` settings. 86 | 87 | **You must specify resolved parent state values to provide to the modal controller** 88 | 89 | By default, `$uibModal.open()` is called with only the resolved values of the modal state. If you want to include 90 | values resolved in parent states, use an array instead of `true` for the `modal` setting. 91 | 92 | In the following examples, `$uibModal.open()` for the `parent.child` state will be called with resolved values 93 | `a`, `b`, `x`, `y` and `z`. 94 | 95 | ``` 96 | $stateProvider 97 | .state('parent', { 98 | ... 99 | resolve: { 100 | a: ..., 101 | b: ..., 102 | c: ... 103 | } 104 | }) 105 | .state('parent.child', { 106 | ... 107 | modal: ['a', 'b'], 108 | resolve: { 109 | x: ..., 110 | y: ..., 111 | z: ... 112 | } 113 | }) 114 | ``` 115 | 116 | **Does not work with old versions of UI-Bootstrap** 117 | 118 | The module uses the current `$uibModal` service rather than the deprecated `$modal`. 119 | 120 | **Does not work with custom `onEnter` and `onExit` state configurations** 121 | 122 | The module works by adding `onEnter` and `onExit` state configurations to modal states. 123 | If these are already defined in a modal state, an error is thrown. 124 | 125 | Copyright & License 126 | ------------------- 127 | 128 | Copyright 2016 Stepan Riha. All Rights Reserved. 129 | 130 | This may be redistributed under the MIT licence. For the full license terms, see the LICENSE file which 131 | should be alongside this readme. 132 | -------------------------------------------------------------------------------- /angular-ui-router-uib-modal.js: -------------------------------------------------------------------------------- 1 | /** 2 | * AngularJS module that adds support for ui-bootstrap modal states when using ui-router. 3 | * 4 | * @link https://github.com/nonplus/angular-ui-router-uib-modal 5 | * 6 | * @license angular-ui-router-uib-modal v0.0.11 7 | * (c) Copyright Stepan Riha 8 | * License MIT 9 | */ 10 | 11 | (function(angular) { 12 | 13 | "use strict"; 14 | angular.module("ui.router.modal", ["ui.router"]) 15 | .config(["$stateProvider", function ($stateProvider) { 16 | var stateProviderState = $stateProvider.state; 17 | $stateProvider["state"] = state; 18 | function state(name, config) { 19 | var stateName; 20 | var options; 21 | // check for $stateProvider.state({name: "state", ...}) usage 22 | if (angular.isObject(name)) { 23 | options = name; 24 | stateName = options.name; 25 | } 26 | else { 27 | options = config; 28 | stateName = name; 29 | } 30 | if (options.modal) { 31 | if (options.onEnter) { 32 | throw new Error("Invalid modal state definition: The onEnter setting may not be specified."); 33 | } 34 | if (options.onExit) { 35 | throw new Error("Invalid modal state definition: The onExit setting may not be specified."); 36 | } 37 | var openModal_1; 38 | // Get modal.resolve keys from state.modal or state.resolve 39 | var resolve_1 = (Array.isArray(options.modal) ? options.modal : []).concat(Object.keys(options.resolve || {})); 40 | var inject_1 = ["$uibModal", "$state"]; 41 | options.onEnter = function ($uibModal, $state) { 42 | // Add resolved values to modal options 43 | if (resolve_1.length) { 44 | options.resolve = {}; 45 | for (var i = 0; i < resolve_1.length; i++) { 46 | options.resolve[resolve_1[i]] = injectedConstant(arguments[inject_1.length + i]); 47 | } 48 | } 49 | var thisModal = openModal_1 = $uibModal.open(options); 50 | openModal_1.result['finally'](function () { 51 | if (thisModal === openModal_1) { 52 | // Dialog was closed via $uibModalInstance.close/dismiss, go to our parent state 53 | $state.go($state.get("^", stateName).name); 54 | } 55 | }); 56 | }; 57 | // Make sure that onEnter receives state.resolve configuration 58 | options.onEnter["$inject"] = inject_1.concat(resolve_1); 59 | options.onExit = function () { 60 | if (openModal_1) { 61 | // State has changed while dialog was open 62 | openModal_1.close(); 63 | openModal_1 = null; 64 | } 65 | }; 66 | } 67 | return stateProviderState.call($stateProvider, stateName, options); 68 | } 69 | }]); 70 | function injectedConstant(val) { 71 | return [function () { return val; }]; 72 | } 73 | 74 | 75 | })(window.angular); -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-ui-router-uib-modal", 3 | "version": "0.0.11", 4 | "homepage": "https://github.com/nonplus/angular-ui-router-uib-modal", 5 | "authors": [ 6 | "Stepan Riha " 7 | ], 8 | "description": "AngularJS module that adds support for ui-bootstrap modal states when using ui-router.", 9 | "main": "./angular-ui-router-uib-modal.js", 10 | "license": "MIT", 11 | "ignore": [ 12 | "**/.*", 13 | "node_modules", 14 | "bower_components", 15 | "test", 16 | "tests" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /build.txt: -------------------------------------------------------------------------------- 1 | /** 2 | * <%= info.description %> 3 | * 4 | * @link <%= info.homepage %> 5 | * 6 | * @license <%= info.name %> v<%= info.version %> 7 | * (c) Copyright <%= info.author %> 8 | * License <%= info.license %> 9 | */ 10 | 11 | (function(angular) { 12 | 13 | <%= contents %> 14 | 15 | })(window.angular); -------------------------------------------------------------------------------- /files.conf.js: -------------------------------------------------------------------------------- 1 | files = { 2 | libs: [ 3 | 'node_modules/lodash/index.js', 4 | 'node_modules/angular/angular.js', 5 | 'node_modules/angular-ui-router/release/angular-ui-router.js', 6 | 'node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js' 7 | ], 8 | 9 | src: [ 10 | 'src/angular-ui-router-uib-modal.ts' 11 | ], 12 | 13 | test: [ 14 | 'node_modules/angular-mocks/angular-mocks.js', 15 | 'test/*.spec.ts' 16 | ] 17 | }; 18 | 19 | if (exports) { 20 | var _ = require('lodash'); 21 | _.extend(exports, files); 22 | } -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | // dependencies 2 | var gulp = require('gulp'); 3 | var git = require('gulp-git'); 4 | var bump = require('gulp-bump'); 5 | var filter = require('gulp-filter'); 6 | var tag_version = require('gulp-tag-version'); 7 | var tslint = require("gulp-tslint"); 8 | var runSequence = require('run-sequence'); 9 | var wrap = require("gulp-wrap"); 10 | var gutil = require('gulp-util'); 11 | var serve = require('gulp-serve'); 12 | var files = require('./files.conf'); 13 | var testFiles = [].concat(files.libs, files.src, files.test); 14 | 15 | var port = 8083; 16 | 17 | gulp.task('bump-version', function () { 18 | return gulp.src(['./bower.json', './package.json']) 19 | .pipe(bump({type: "patch"}).on('error', gutil.log)) 20 | .pipe(gulp.dest('./')); 21 | }); 22 | 23 | gulp.task('commit-changes', ['test'], function () { 24 | return gulp.src('.') 25 | .pipe(git.commit('Bumped version number', {args: '-a'})); 26 | }); 27 | 28 | gulp.task('tag-version', function() { 29 | return gulp.src('package.json') 30 | .pipe(tag_version()); 31 | }); 32 | 33 | gulp.task('push-changes', function (cb) { 34 | git.push('origin', 'master', cb); 35 | }); 36 | 37 | gulp.task('release', ['ts-compile', 'test'], function (callback) { 38 | runSequence( 39 | 'bump-version', 40 | 'build', 41 | 'commit-changes', 42 | 'tag-version', 43 | function (error) { 44 | if (error) { 45 | console.log(error.message); 46 | } else { 47 | console.log('RELEASE FINISHED SUCCESSFULLY'); 48 | } 49 | callback(error); 50 | }); 51 | }); 52 | 53 | gulp.task('tag-version', function() { 54 | return gulp.src('./package.json') 55 | .pipe(tag_version()); 56 | }); 57 | 58 | gulp.task('build', ['ts-compile'], function() { 59 | return gulp.src("src/angular-ui-router-uib-modal.js") 60 | .pipe(wrap({ src: './build.txt' }, { info: require('./package.json') })) 61 | .pipe(gulp.dest('.')); 62 | }); 63 | 64 | gulp.task('ts-compile', function() { 65 | var ts = require('gulp-typescript'); 66 | var tsProject = ts.createProject('tsconfig.json'); 67 | return tsProject.src(['src/**/*.ts', 'test/**/*.ts']) 68 | .pipe(tsProject()).js 69 | .pipe(gulp.dest('.')); 70 | }); 71 | 72 | gulp.task('serve', serve({ 73 | root: __dirname, 74 | port: port, 75 | middleware: function(req, resp, next) { 76 | console.log(req.originalUrl); 77 | if(req.originalUrl == '/') { 78 | resp.statusCode = 302; 79 | resp.setHeader('Location', '/sample/'); 80 | resp.setHeader('Content-Length', '0'); 81 | resp.end(); 82 | } else { 83 | next(); 84 | } 85 | } 86 | })); 87 | 88 | gulp.task('demo', ['serve'], function() { 89 | require('open')('http://localhost:' + port); 90 | }); 91 | 92 | gulp.task('test', ['lint'], function (done) { 93 | var Server = require('karma').Server; 94 | new Server({ 95 | configFile: __dirname + '/karma.conf.js', 96 | singleRun: true 97 | }, done).start(); 98 | }); 99 | 100 | gulp.task('watch', function (done) { 101 | var Server = require('karma').Server; 102 | new Server({ 103 | configFile: __dirname + '/karma.conf.js' 104 | }, done).start(); 105 | }); 106 | 107 | gulp.task('lint', function () { 108 | return gulp.src([ 109 | "./src/**/*.ts", 110 | "./test/**/*.ts" 111 | ]) 112 | .pipe(tslint({ 113 | formatter: "verbose" 114 | })) 115 | .pipe(tslint.report()); 116 | }); 117 | -------------------------------------------------------------------------------- /index.d.ts: -------------------------------------------------------------------------------- 1 | import angular = require("angular"); 2 | 3 | declare module 'angular' { 4 | export namespace ui { 5 | interface IState { 6 | modal?: boolean | string[]; 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file 2 | module.exports = function (karma) { 3 | 4 | var files = require('./files.conf'); 5 | 6 | karma.set({ 7 | // base path, that will be used to resolve files and exclude 8 | basePath: '.', 9 | 10 | frameworks: ['jasmine', 'karma-typescript'], 11 | 12 | // list of files / patterns to load in the browser 13 | files: [].concat(files.libs, files.src, files.test), 14 | 15 | preprocessors: { 16 | "**/*.ts": ["karma-typescript"] 17 | }, 18 | 19 | karmaTypescriptConfig: { 20 | bundlerOptions: { 21 | addNodeGlobals: false 22 | } 23 | }, 24 | 25 | reporters: ["progress", "karma-typescript"], 26 | 27 | // level of logging 28 | // possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG 29 | logLevel: karma.LOG_DEBUG, 30 | 31 | // Start these browsers, currently available: 32 | // - Chrome 33 | // - ChromeCanary 34 | // - Firefox 35 | // - Opera 36 | // - Safari 37 | // - PhantomJS 38 | browsers: [ 'Chrome' ] 39 | }) 40 | }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-ui-router-uib-modal", 3 | "version": "0.0.11", 4 | "description": "AngularJS module that adds support for ui-bootstrap modal states when using ui-router.", 5 | "main": "angular-ui-router-uib-modal.js", 6 | "types": "./index.d.ts", 7 | "directories": { 8 | "test": "test" 9 | }, 10 | "scripts": { 11 | "ts-compile": "./node_modules/gulp/bin/gulp.js ts-compile", 12 | "karma-test": "./node_modules/karma/bin/karma start --browsers Firefox --single-run", 13 | "test": "npm run ts-compile && npm run karma-test" 14 | }, 15 | "repository": { 16 | "type": "git", 17 | "url": "https://github.com/nonplus/angular-ui-router-uib-modal.git" 18 | }, 19 | "author": "Stepan Riha ", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/nonplus/angular-ui-router-uib-modal/issues" 23 | }, 24 | "homepage": "https://github.com/nonplus/angular-ui-router-uib-modal", 25 | "devDependencies": { 26 | "@types/angular": "^1.5", 27 | "@types/angular-mocks": "^1.5", 28 | "@types/angular-ui-bootstrap": "^0.13", 29 | "@types/angular-ui-router": "^1.1", 30 | "@types/jasmine": "^2.5.35", 31 | "angular": "^1.5", 32 | "angular-mocks": "^1.5", 33 | "angular-ui-bootstrap": "^1.3.3", 34 | "angular-ui-router": "^0.3.2", 35 | "gulp": "^3.8.11", 36 | "gulp-bump": "^0.3.0", 37 | "gulp-eslint": "^3.0.1", 38 | "gulp-filter": "^2.0.2", 39 | "gulp-git": "^1.11.3", 40 | "gulp-serve": "^0.3.1", 41 | "gulp-tag-version": "^1.2.1", 42 | "gulp-tslint": "^6.1.2", 43 | "gulp-typescript": "^3.0.2", 44 | "gulp-util": "^3.0.4", 45 | "gulp-wrap": "^0.11.0", 46 | "jasmine-core": "^2.5.2", 47 | "karma": "^1.7.0", 48 | "karma-chrome-launcher": "^2.1.1", 49 | "karma-firefox-launcher": "^1.0.1", 50 | "karma-jasmine": "^1.1.0", 51 | "karma-typescript": "^3.0.2", 52 | "lodash": "^3.8.0", 53 | "open": "0.0.5", 54 | "run-sequence": "^1.2.2", 55 | "tslint": "^3.15.1", 56 | "typescript": "^2.0.3" 57 | }, 58 | "dependencies": {} 59 | } 60 | -------------------------------------------------------------------------------- /sample/app/app.js: -------------------------------------------------------------------------------- 1 | // Make sure to include the `ui.router` module as a dependency 2 | angular.module('uiRouterSample', [ 3 | 'uiRouterSample.contacts', 4 | 'uiRouterSample.contacts.service', 5 | 'uiRouterSample.utils.service', 6 | 'ui.router', 7 | 'ui.bootstrap.modal', 8 | 'ui.router.modal', 9 | 'ngAnimate' 10 | ]) 11 | 12 | .run( 13 | [ '$rootScope', '$state', '$stateParams', 14 | function ($rootScope, $state, $stateParams) { 15 | 16 | // It's very handy to add references to $state and $stateParams to the $rootScope 17 | // so that you can access them from any scope within your applications.For example, 18 | //
  • will set the
  • 19 | // to active whenever 'contacts.list' or one of its decendents is active. 20 | $rootScope.$state = $state; 21 | $rootScope.$stateParams = $stateParams; 22 | } 23 | ] 24 | ) 25 | 26 | .config( 27 | [ '$stateProvider', '$urlRouterProvider', 28 | function ($stateProvider, $urlRouterProvider) { 29 | 30 | ///////////////////////////// 31 | // Redirects and Otherwise // 32 | ///////////////////////////// 33 | 34 | // Use $urlRouterProvider to configure any redirects (when) and invalid urls (otherwise). 35 | $urlRouterProvider 36 | 37 | // The `when` method says if the url is ever the 1st param, then redirect to the 2nd param 38 | // Here we are just setting up some convenience urls. 39 | .when('/c?id', '/contacts/:id') 40 | .when('/user/:id', '/contacts/:id') 41 | 42 | // If the url is ever invalid, e.g. '/asdf', then redirect to '/' aka the home state 43 | .otherwise('/'); 44 | 45 | 46 | ////////////////////////// 47 | // State Configurations // 48 | ////////////////////////// 49 | 50 | // Use $stateProvider to configure your states. 51 | $stateProvider 52 | 53 | ////////// 54 | // Home // 55 | ////////// 56 | 57 | .state("home", { 58 | 59 | // Use a url of "/" to set a states as the "index". 60 | url: "/", 61 | 62 | resolve: { 63 | // Static $title 64 | $title: function() { return "Home"; } 65 | }, 66 | 67 | // Example of an inline template string. By default, templates 68 | // will populate the ui-view within the parent state's template. 69 | // For top level states, like this one, the parent template is 70 | // the index.html file. So this template will be inserted into the 71 | // ui-view within index.html. 72 | template: '

    Welcome to the UI-Router Demo

    ' + 73 | '

    Use the menu above to navigate. ' + 74 | 'Pay attention to the $state and $stateParams values below.

    ' + 75 | '

    Click these links—Alice or ' + 76 | 'Bob—to see a url redirect in action.

    ' 77 | 78 | }) 79 | 80 | /////////// 81 | // About // 82 | /////////// 83 | 84 | .state('about', { 85 | url: '/about', 86 | 87 | resolve: { 88 | // Static $title 89 | $title: function() { return "About"; } 90 | }, 91 | 92 | // Showing off how you could return a promise from templateProvider 93 | templateProvider: ['$timeout', 94 | function ( $timeout) { 95 | return $timeout(function () { 96 | return '

    UI-Router Resources

    '; 103 | }, 100); 104 | }] 105 | }) 106 | } 107 | ] 108 | ); 109 | -------------------------------------------------------------------------------- /sample/app/contacts/contacts-service.js: -------------------------------------------------------------------------------- 1 | angular.module('uiRouterSample.contacts.service', [ 2 | 3 | ]) 4 | 5 | // A RESTful factory for retrieving contacts from 'contacts.json' 6 | .factory('contacts', ['$http', 'utils', function ($http, utils) { 7 | var path = 'assets/contacts.json'; 8 | var contacts = $http.get(path).then(function (resp) { 9 | return resp.data.contacts; 10 | }); 11 | 12 | var factory = {}; 13 | factory.all = function () { 14 | return contacts; 15 | }; 16 | factory.get = function (id) { 17 | return contacts.then(function(){ 18 | return utils.findById(contacts, id); 19 | }) 20 | }; 21 | return factory; 22 | }]); 23 | -------------------------------------------------------------------------------- /sample/app/contacts/contacts.detail.html: -------------------------------------------------------------------------------- 1 |
    2 |

    {{contact.name}}

    3 | 12 |
    13 | 15 | Click on a contact item to view and/or edit it. 16 |
    17 |
    18 | -------------------------------------------------------------------------------- /sample/app/contacts/contacts.detail.item.edit.html: -------------------------------------------------------------------------------- 1 |
    2 |

    Edit Item

    3 |
    4 |
    5 | 6 |
    7 |
    8 | 9 |
    10 | -------------------------------------------------------------------------------- /sample/app/contacts/contacts.detail.item.html: -------------------------------------------------------------------------------- 1 |
    2 |

    {{item.type}}

    3 |
    {{item.value}}
    4 | -------------------------------------------------------------------------------- /sample/app/contacts/contacts.html: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |
    4 | 16 |
    17 | 18 | 19 | 20 |
    21 |
    22 |
    23 | 24 | 25 |
    26 |
    27 | -------------------------------------------------------------------------------- /sample/app/contacts/contacts.js: -------------------------------------------------------------------------------- 1 | angular.module('uiRouterSample.contacts', [ 2 | 'ui.router.modal', 3 | 'ui.bootstrap' 4 | ]) 5 | 6 | .config( 7 | [ '$stateProvider', '$urlRouterProvider', 8 | function ($stateProvider, $urlRouterProvider) { 9 | $stateProvider 10 | ////////////// 11 | // Contacts // 12 | ////////////// 13 | .state('contacts', { 14 | 15 | // With abstract set to true, that means this state can not be explicitly activated. 16 | // It can only be implicitly activated by activating one of its children. 17 | abstract: true, 18 | 19 | // This abstract state will prepend '/contacts' onto the urls of all its children. 20 | url: '/contacts', 21 | 22 | // Example of loading a template from a file. This is also a top level state, 23 | // so this template file will be loaded and then inserted into the ui-view 24 | // within index.html. 25 | templateUrl: 'app/contacts/contacts.html', 26 | 27 | // Use `resolve` to resolve any asynchronous controller dependencies 28 | // *before* the controller is instantiated. In this case, since contacts 29 | // returns a promise, the controller will wait until contacts.all() is 30 | // resolved before instantiation. Non-promise return values are considered 31 | // to be resolved immediately. 32 | resolve: { 33 | contacts: ['contacts', 34 | function( contacts){ 35 | return contacts.all(); 36 | }] 37 | }, 38 | 39 | // You can pair a controller to your template. There *must* be a template to pair with. 40 | controller: ['$scope', '$state', 'contacts', 'utils', 41 | function ( $scope, $state, contacts, utils) { 42 | 43 | // Add a 'contacts' field in this abstract parent's scope, so that all 44 | // child state views can access it in their scopes. Please note: scope 45 | // inheritance is not due to nesting of states, but rather choosing to 46 | // nest the templates of those states. It's normal scope inheritance. 47 | $scope.contacts = contacts; 48 | 49 | $scope.goToRandom = function () { 50 | var randId = utils.newRandomKey($scope.contacts, "id", $state.params.contactId); 51 | 52 | // $state.go() can be used as a high level convenience method 53 | // for activating a state programmatically. 54 | $state.go('contacts.detail', { contactId: randId }); 55 | }; 56 | }] 57 | }) 58 | 59 | ///////////////////// 60 | // Contacts > List // 61 | ///////////////////// 62 | 63 | // Using a '.' within a state name declares a child within a parent. 64 | // So you have a new state 'list' within the parent 'contacts' state. 65 | .state('contacts.list', { 66 | 67 | // Using an empty url means that this child state will become active 68 | // when its parent's url is navigated to. Urls of child states are 69 | // automatically appended to the urls of their parent. So this state's 70 | // url is '/contacts' (because '/contacts' + ''). 71 | url: '', 72 | 73 | // IMPORTANT: Now we have a state that is not a top level state. Its 74 | // template will be inserted into the ui-view within this state's 75 | // parent's template; so the ui-view within contacts.html. This is the 76 | // most important thing to remember about templates. 77 | templateUrl: 'app/contacts/contacts.list.html' 78 | }) 79 | 80 | /////////////////////// 81 | // Contacts > Detail // 82 | /////////////////////// 83 | 84 | // You can have unlimited children within a state. Here is a second child 85 | // state within the 'contacts' parent state. 86 | .state('contacts.detail', { 87 | 88 | // Urls can have parameters. They can be specified like :param or {param}. 89 | // If {} is used, then you can also specify a regex pattern that the param 90 | // must match. The regex is written after a colon (:). Note: Don't use capture 91 | // groups in your regex patterns, because the whole regex is wrapped again 92 | // behind the scenes. Our pattern below will only match numbers with a length 93 | // between 1 and 4. 94 | 95 | // Since this state is also a child of 'contacts' its url is appended as well. 96 | // So its url will end up being '/contacts/{contactId:[0-9]{1,4}}'. When the 97 | // url becomes something like '/contacts/42' then this state becomes active 98 | // and the $stateParams object becomes { contactId: 42 }. 99 | url: '/{contactId:[0-9]{1,4}}', 100 | 101 | resolve: { 102 | contact: ['utils', 'contacts', '$stateParams', function(utils, contacts, $stateParams) { 103 | return utils.findById(contacts, $stateParams.contactId); 104 | }] 105 | }, 106 | 107 | // If there is more than a single ui-view in the parent template, or you would 108 | // like to target a ui-view from even higher up the state tree, you can use the 109 | // views object to configure multiple views. Each view can get its own template, 110 | // controller, and resolve data. 111 | 112 | // View names can be relative or absolute. Relative view names do not use an '@' 113 | // symbol. They always refer to views within this state's parent template. 114 | // Absolute view names use a '@' symbol to distinguish the view and the state. 115 | // So 'foo@bar' means the ui-view named 'foo' within the 'bar' state's template. 116 | views: { 117 | 118 | // So this one is targeting the unnamed view within the parent state's template. 119 | '': { 120 | templateUrl: 'app/contacts/contacts.detail.html', 121 | controller: ['$scope', 'contact', 122 | function ( $scope, contact) { 123 | $scope.contact = contact; 124 | }] 125 | }, 126 | 127 | // This one is targeting the ui-view="hint" within the unnamed root, aka index.html. 128 | // This shows off how you could populate *any* view within *any* ancestor state. 129 | 'hint@': { 130 | template: 'This is contacts.detail populating the "hint" ui-view' 131 | }, 132 | 133 | // This one is targeting the ui-view="menuTip" within the parent state's template. 134 | 'menuTip': { 135 | // templateProvider is the final method for supplying a template. 136 | // There is: template, templateUrl, and templateProvider. 137 | templateProvider: ['$stateParams', 138 | function ( $stateParams) { 139 | // This is just to demonstrate that $stateParams injection works for templateProvider. 140 | // $stateParams are the parameters for the new state we're transitioning to, even 141 | // though the global '$stateParams' has not been updated yet. 142 | return '
    Contact ID: ' + $stateParams.contactId + ''; 143 | }] 144 | } 145 | } 146 | }) 147 | 148 | ////////////////////////////// 149 | // Contacts > Detail > Item // 150 | ////////////////////////////// 151 | 152 | .state('contacts.detail.item', { 153 | 154 | // So following what we've learned, this state's full url will end up being 155 | // '/contacts/{contactId}/item/:itemId'. We are using both types of parameters 156 | // in the same url, but they behave identically. 157 | url: '/item/:itemId', 158 | 159 | resolve: { 160 | item: ['$stateParams', 'contact', 'utils', 161 | function ( $stateParams, contact, utils) { 162 | return utils.findById(contact.items, $stateParams.itemId); 163 | }] 164 | }, 165 | 166 | views: { 167 | 168 | // This is targeting the unnamed ui-view within the parent state 'contact.detail' 169 | // We wouldn't have to do it this way if we didn't also want to set the 'hint' view below. 170 | // We could instead just set templateUrl and controller outside of the view obj. 171 | '': { 172 | templateUrl: 'app/contacts/contacts.detail.item.html', 173 | controller: ['$scope', '$stateParams', '$state', 'item', 174 | function ( $scope, $stateParams, $state, item) { 175 | $scope.item = item; 176 | 177 | $scope.edit = function () { 178 | // Here we show off go's ability to navigate to a relative state. Using '^' to go upwards 179 | // and '.' to go down, you can navigate to any relative state (ancestor or descendant). 180 | // Here we are going down to the child state 'edit' (full name of 'contacts.detail.item.edit') 181 | $state.go('.edit', $stateParams); 182 | }; 183 | }] 184 | }, 185 | 186 | // Here we see we are overriding the template that was set by 'contacts.detail' 187 | 'hint@': { 188 | template: ' This is contacts.detail.item overriding the "hint" ui-view' 189 | } 190 | } 191 | }) 192 | 193 | ///////////////////////////////////// 194 | // Contacts > Detail > Item > Edit // 195 | ///////////////////////////////////// 196 | 197 | // Notice that this state has no 'url'. States do not require a url. You can use them 198 | // simply to organize your application into "places" where each "place" can configure 199 | // only what it needs. The only way to get to this state is via $state.go (or transitionTo) 200 | .state('contacts.detail.item.edit', { 201 | // This is targeting the unnamed view within the 'contacts.detail' state 202 | // essentially swapping out the template that 'contacts.detail.item' had 203 | // inserted with this state's template. 204 | url: '/edit', 205 | templateUrl: 'app/contacts/contacts.detail.item.edit.html', 206 | modal: ["item"], 207 | controller: ['$scope', '$state', 'item', 208 | function ( $scope, $state, item) { 209 | $scope.item = item; 210 | $scope.done = function () { 211 | // Go back up. '^' means up one. '^.^' would be up twice, to the grandparent. 212 | $state.go('^'); 213 | }; 214 | }] 215 | }); 216 | } 217 | ] 218 | ); 219 | -------------------------------------------------------------------------------- /sample/app/contacts/contacts.list.html: -------------------------------------------------------------------------------- 1 |

    All Contacts

    2 | 7 | -------------------------------------------------------------------------------- /sample/assets/contacts.json: -------------------------------------------------------------------------------- 1 | { 2 | "contacts":[ 3 | { 4 | "id": 1, 5 | "name": "Alice", 6 | "items": [ 7 | { 8 | "id": "a", 9 | "type": "phone number", 10 | "value": "555-1234-1234" 11 | }, 12 | { 13 | "id": "b", 14 | "type": "email", 15 | "value": "alice@mailinator.com" 16 | } 17 | ] 18 | }, 19 | { 20 | "id": 42, 21 | "name": "Bob", 22 | "items": [ 23 | { 24 | "id": "a", 25 | "type": "blog", 26 | "value": "http://bob.blogger.com" 27 | }, 28 | { 29 | "id": "b", 30 | "type": "fax", 31 | "value": "555-999-9999" 32 | } 33 | ] 34 | }, 35 | { 36 | "id": 123, 37 | "name": "Eve", 38 | "items": [ 39 | { 40 | "id": "a", 41 | "type": "full name", 42 | "value": "Eve Adamsdottir" 43 | } 44 | ] 45 | } 46 | ] 47 | } -------------------------------------------------------------------------------- /sample/common/utils/utils-service.js: -------------------------------------------------------------------------------- 1 | angular.module('uiRouterSample.utils.service', [ 2 | 3 | ]) 4 | 5 | .factory('utils', function () { 6 | return { 7 | // Util for finding an object by its 'id' property among an array 8 | findById: function findById(a, id) { 9 | for (var i = 0; i < a.length; i++) { 10 | if (a[i].id == id) return a[i]; 11 | } 12 | return null; 13 | }, 14 | 15 | // Util for returning a random key from a collection that also isn't the current key 16 | newRandomKey: function newRandomKey(coll, key, currentKey){ 17 | var randKey; 18 | do { 19 | randKey = coll[Math.floor(coll.length * Math.random())][key]; 20 | } while (randKey == currentKey); 21 | return randKey; 22 | } 23 | }; 24 | }); 25 | -------------------------------------------------------------------------------- /sample/css/styles.css: -------------------------------------------------------------------------------- 1 | .slide.ng-leave { 2 | position: relative; 3 | } 4 | .slide.ng-enter { 5 | position: absolute; 6 | } 7 | .slide.ng-enter, .slide.ng-leave { 8 | -webkit-transition: -webkit-transform 0.3s ease-in, opacity 0.3s ease-in; 9 | -moz-transition: -moz-transform 0.3s ease-in, opacity 0.3s ease-in; 10 | -o-transition: -o-transform 0.3s ease-in, opacity 0.3s ease-in; 11 | transition: transform 0.3s ease-in, opacity 0.3s ease-in; 12 | } 13 | .slide.ng-enter, .slide.ng-leave.ng-leave-active { 14 | -webkit-transform: scaleX(0.0001); 15 | -o-transform: scaleX(0.0001); 16 | transform: scaleX(0.0001); 17 | opacity: 0; 18 | } 19 | .slide, .slide.ng-enter.ng-enter-active { 20 | -webkit-transform: scaleX(1); 21 | -o-transform: scaleX(1); 22 | transform: scaleX(1); 23 | opacity: 1; 24 | } 25 | -------------------------------------------------------------------------------- /sample/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 24 | 25 | 26 | 29 | 30 | 31 | 34 | 35 | 36 | 37 | UI Router Modal Sample 38 | 39 | 40 |
    41 |
    42 | 43 | 48 | ui-router 49 | 57 | 58 | 60 |

    61 |
    62 |
    63 | 64 | 66 |
    67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /src/angular-ui-router-uib-modal.ts: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | angular.module("ui.router.modal", ["ui.router"]) 4 | .config(["$stateProvider", function($stateProvider: angular.ui.IStateProvider) { 5 | 6 | let stateProviderState = $stateProvider.state; 7 | 8 | $stateProvider["state"] = state as any; 9 | 10 | function state(name: string, config: angular.ui.IState): angular.ui.IStateProvider 11 | function state(config: angular.ui.IStateProvider): angular.ui.IStateProvider 12 | function state(name: any, config?: angular.ui.IState): angular.ui.IStateProvider { 13 | 14 | var stateName: string; 15 | var options: angular.ui.IState; 16 | 17 | // check for $stateProvider.state({name: "state", ...}) usage 18 | if (angular.isObject(name)) { 19 | options = name; 20 | stateName = options.name; 21 | } else { 22 | options = config; 23 | stateName = name; 24 | } 25 | 26 | if (options.modal) { 27 | 28 | if (options.onEnter) { 29 | throw new Error("Invalid modal state definition: The onEnter setting may not be specified."); 30 | } 31 | 32 | if (options.onExit) { 33 | throw new Error("Invalid modal state definition: The onExit setting may not be specified."); 34 | } 35 | 36 | let openModal: angular.ui.bootstrap.IModalServiceInstance; 37 | 38 | // Get modal.resolve keys from state.modal or state.resolve 39 | let resolve = (Array.isArray(options.modal) ? options.modal as string[] : [] as string[]).concat(Object.keys(options.resolve || {})); 40 | 41 | let inject = ["$uibModal", "$state"]; 42 | options.onEnter = function($uibModal: angular.ui.bootstrap.IModalService, $state: angular.ui.IStateService) { 43 | 44 | // Add resolved values to modal options 45 | if (resolve.length) { 46 | options.resolve = {}; 47 | for (let i = 0; i < resolve.length; i++) { 48 | options.resolve[resolve[i]] = injectedConstant(arguments[inject.length + i]); 49 | } 50 | } 51 | 52 | let thisModal = openModal = $uibModal.open(options as angular.ui.bootstrap.IModalSettings); 53 | 54 | openModal.result['finally'](function() { 55 | if (thisModal === openModal) { 56 | // Dialog was closed via $uibModalInstance.close/dismiss, go to our parent state 57 | $state.go($state.get("^", stateName).name); 58 | } 59 | }); 60 | }; 61 | 62 | // Make sure that onEnter receives state.resolve configuration 63 | options.onEnter["$inject"] = inject.concat(resolve); 64 | 65 | options.onExit = function() { 66 | if (openModal) { 67 | // State has changed while dialog was open 68 | openModal.close(); 69 | openModal = null; 70 | } 71 | }; 72 | 73 | } 74 | 75 | return stateProviderState.call($stateProvider, stateName, options); 76 | } 77 | }]); 78 | 79 | function injectedConstant(val: T): [() => T] { 80 | return [function() { return val; }]; 81 | } 82 | -------------------------------------------------------------------------------- /test/angular-ui-router-modal.spec.ts: -------------------------------------------------------------------------------- 1 | import angular = require("angular"); 2 | 3 | let mock = angular.mock; 4 | type IStateService = ng.ui.IStateService; 5 | type IModalService = ng.ui.bootstrap.IModalService; 6 | 7 | describe('angular-ui-router-uib-modal', function() { 8 | 9 | beforeEach(mock.module('ui.router.modal')); 10 | 11 | beforeEach(mock.module('ui.bootstrap')); 12 | 13 | var baseVal1, baseVal2, baseVal3, modalChildVal1, modalTemplate, injected, modalClosing, baseResolve; 14 | 15 | beforeEach(mock.module(function($stateProvider) { 16 | baseVal1 = {}; 17 | baseVal2 = ["one", 2, "three"]; 18 | baseVal3 = function() { throw new Error("This shouldn't be called!"); }; 19 | modalChildVal1 = {}; 20 | modalTemplate = "modalChild: "; 21 | baseResolve = jasmine.createSpy("base1").and.returnValue(baseVal1); 22 | 23 | $stateProvider.state('base', { 24 | template: "", 25 | params: { 26 | a: "", 27 | b: "" 28 | }, 29 | resolve: { 30 | base1: baseResolve, 31 | base2: function() { return baseVal2; }, 32 | base3: function() { return baseVal3; } 33 | } 34 | }); 35 | 36 | $stateProvider.state('unrelated', { }); 37 | 38 | $stateProvider.state('base.normalChild', { 39 | template: "normalChild" 40 | }); 41 | 42 | $stateProvider.state('base.modalChild', { 43 | modal: ["base1", "base2", "base3"], 44 | template: modalTemplate, 45 | params: { 46 | x: "" 47 | }, 48 | // controller: "ModalStateCtrl", 49 | controller: function(base1, base2, base3, modalChild1, $scope: angular.IScope, $stateParams) { 50 | injected = { 51 | base1: base1, 52 | base2: base2, 53 | base3: base3, 54 | modalChild1: modalChild1, 55 | x: $stateParams.x, 56 | $scope: $scope 57 | }; 58 | modalClosing = jasmine.createSpy("modalClosing"); 59 | $scope.$on("modal.closing", modalClosing); 60 | }, 61 | resolve: { 62 | modalChild1: function() { return modalChildVal1; } 63 | } 64 | }); 65 | 66 | $stateProvider.state({ 67 | name: 'base.modalChild.grandChild', 68 | template: "grandChild" 69 | }); 70 | 71 | })); 72 | 73 | describe("entering a non-modal state", function() { 74 | it("should not call $uibModal.open()", mock.inject(function($state: IStateService, $rootScope: ng.IRootScopeService, $uibModal: IModalService) { 75 | spyOn($uibModal, "open"); 76 | $state.go("base.normalChild"); $rootScope.$digest(); 77 | expect($state.current.name).toEqual('base.normalChild'); 78 | expect($uibModal.open).not.toHaveBeenCalled(); 79 | })); 80 | }); 81 | 82 | describe("entering modal state", function() { 83 | 84 | it("should call $uibModal.open()", mock.inject(function($state: IStateService, $rootScope: ng.IRootScopeService, $uibModal: IModalService) { 85 | spyOn($uibModal, "open").and.callThrough(); 86 | $state.go("base.modalChild"); $rootScope.$digest(); 87 | expect($state.current.name).toEqual('base.modalChild'); 88 | expect($uibModal.open).toHaveBeenCalled(); 89 | })); 90 | 91 | it("should inject values resolved in state", mock.inject(function($state: IStateService, $rootScope: ng.IRootScopeService, $uibModal: IModalService) { 92 | spyOn($uibModal, "open").and.callThrough(); 93 | $state.go("base.modalChild"); $rootScope.$digest(); 94 | expect(injected.modalChild1).toBe(modalChildVal1); 95 | })); 96 | 97 | it("should inject values specified in modal setting", mock.inject(function($state: IStateService, $rootScope: ng.IRootScopeService, $uibModal: IModalService) { 98 | spyOn($uibModal, "open").and.callThrough(); 99 | $state.go("base.modalChild"); $rootScope.$digest(); 100 | expect(injected.base1).toBe(baseVal1); 101 | expect(injected.base2).toBe(baseVal2); 102 | expect(injected.base3).toBe(baseVal3); 103 | })); 104 | 105 | }); 106 | 107 | describe("entering same modal state with changed parameters", function() { 108 | 109 | it("should properly transition", mock.inject(function($state: IStateService, $rootScope: ng.IRootScopeService) { 110 | // Go to base.modalChild with x=a 111 | $state.go("base.modalChild", { x: "a" }); $rootScope.$digest(); 112 | expect($state.current.name).toEqual('base.modalChild'); 113 | expect(injected.x).toBe("a"); 114 | 115 | // Go to base.modalChild with x=b 116 | $state.go("base.modalChild", { x: "b" }); $rootScope.$digest(); 117 | expect($state.current.name).toEqual('base.modalChild'); 118 | expect(injected.x).toBe("b"); 119 | })); 120 | 121 | }); // entering same modal state with changed parameters 122 | 123 | describe("entering nested state from modal", function() { 124 | it("should not re-open modal", mock.inject(function($state: IStateService, $rootScope: ng.IRootScopeService, $uibModal: IModalService) { 125 | let open = spyOn($uibModal, "open").and.callThrough(); 126 | $state.go("base.modalChild"); $rootScope.$digest(); 127 | open.calls.reset(); 128 | $state.go(".grandChild"); $rootScope.$digest(); 129 | expect($state.current.name).toEqual('base.modalChild.grandChild'); 130 | expect($uibModal.open).not.toHaveBeenCalled(); 131 | })); 132 | }); 133 | 134 | describe("exiting nested state", function() { 135 | it("should not close modal", mock.inject(function($state: IStateService, $rootScope: ng.IRootScopeService, $uibModal: IModalService) { 136 | let open = spyOn($uibModal, "open").and.callThrough(); 137 | $state.go("base.modalChild.grandChild"); $rootScope.$digest(); 138 | open.calls.reset(); 139 | $state.go("^"); $rootScope.$digest(); 140 | expect($state.current.name).toEqual('base.modalChild'); 141 | expect(modalClosing).not.toHaveBeenCalled(); 142 | })); 143 | }); 144 | 145 | describe("exiting modal state", function() { 146 | it("should close modal", mock.inject(function($state: IStateService, $rootScope: ng.IRootScopeService) { 147 | $state.go("base.modalChild"); $rootScope.$digest(); 148 | expect($state.current.name).toEqual('base.modalChild'); 149 | $state.go("^"); $rootScope.$digest(); 150 | expect($state.current.name).toEqual('base'); 151 | expect(modalClosing).toHaveBeenCalled(); 152 | })); 153 | }); 154 | 155 | describe("going to unrelated state", function() { 156 | it("should close modal", mock.inject(function($state: IStateService, $rootScope: ng.IRootScopeService) { 157 | $state.go("base.modalChild.grandChild"); $rootScope.$digest(); 158 | expect($state.current.name).toEqual('base.modalChild.grandChild'); 159 | $state.go("unrelated"); $rootScope.$digest(); 160 | expect($state.current.name).toEqual('unrelated'); 161 | expect(modalClosing).toHaveBeenCalled(); 162 | })); 163 | }); 164 | 165 | describe("closing modal", function() { 166 | it("should exit modal state", mock.inject(function($state: IStateService, $rootScope: ng.IRootScopeService) { 167 | $state.go("base.modalChild", { a: "someValue" }); $rootScope.$digest(); 168 | expect($state.current.name).toEqual('base.modalChild'); 169 | baseResolve.calls.reset(); 170 | injected.$scope.$close(); $rootScope.$digest(); 171 | expect($state.current.name).toEqual('base'); 172 | expect(baseResolve.calls.count()).toBe(0); 173 | })); 174 | }); 175 | 176 | describe("closing modal from nested state", function() { 177 | it("should go to parent state", mock.inject(function($state: IStateService, $rootScope: ng.IRootScopeService) { 178 | $state.go("base.modalChild.grandChild", { a: "someValue" }); $rootScope.$digest(); 179 | expect($state.current.name).toEqual('base.modalChild.grandChild'); 180 | baseResolve.calls.reset(); 181 | injected.$scope.$close(); $rootScope.$digest(); 182 | expect($state.current.name).toEqual('base'); 183 | expect(baseResolve.calls.count()).toBe(0); 184 | })); 185 | }); 186 | }); -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "umd", 4 | "target": "es5", 5 | "moduleResolution": "node", 6 | "noImplicitAny": false, 7 | "sourceMap": false, 8 | "lib": ["es5", "dom"] 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "class-name": true, 4 | "comment-format": [ 5 | true, 6 | "check-space" 7 | ], 8 | "indent": [ 9 | true, 10 | "tabs" 11 | ], 12 | "no-duplicate-variable": true, 13 | "no-eval": true, 14 | "no-internal-module": true, 15 | "no-trailing-whitespace": true, 16 | "no-unsafe-finally": true, 17 | "no-var-keyword": false, 18 | "one-line": [ 19 | true, 20 | "check-open-brace", 21 | "check-whitespace" 22 | ], 23 | "quotemark": [ 24 | false, 25 | "double" 26 | ], 27 | "semicolon": [ 28 | true, 29 | "always" 30 | ], 31 | "triple-equals": [ 32 | true, 33 | "allow-null-check" 34 | ], 35 | "typedef-whitespace": [ 36 | true, 37 | { 38 | "call-signature": "nospace", 39 | "index-signature": "nospace", 40 | "parameter": "nospace", 41 | "property-declaration": "nospace", 42 | "variable-declaration": "nospace" 43 | } 44 | ], 45 | "variable-name": [ 46 | true, 47 | "ban-keywords" 48 | ], 49 | "whitespace": [ 50 | true, 51 | "check-branch", 52 | "check-decl", 53 | "check-operator", 54 | "check-separator", 55 | "check-type" 56 | ] 57 | } 58 | } --------------------------------------------------------------------------------