Skip to content

Commit 862cf48

Browse files
nateabelechristopherthielen
nateabele
authored and
christopherthielen
committed
feat($state): params are now observable
`$stateParams` is now a service with an `$observe()` method to watch parameters on dynamic state parameters. Dynamic state parameters can be declared like so: `params: { foo: { dynamic: true } }`. Closes #1037, #1038, #64
1 parent 9376fc0 commit 862cf48

File tree

6 files changed

+174
-29
lines changed

6 files changed

+174
-29
lines changed

‎src/common.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@ function filterByKeys(keys, values) {
142142
var filtered = {};
143143

144144
forEach(keys, function (name) {
145-
filtered[name] = values[name];
145+
if (isDefined(values[name])) filtered[name] = values[name];
146146
});
147147
return filtered;
148148
}

‎src/state.js

+102-13
Original file line numberDiff line numberDiff line change
@@ -806,15 +806,30 @@ function $StateProvider( $urlRouterProvider, $urlMatcherFactory) {
806806
}
807807
}
808808

809-
// If we're going to the same state and all locals are kept, we've got nothing to do.
810-
// But clear 'transition', as we still want to cancel any other pending transitions.
811-
// TODO: We may not want to bump 'transition' if we're called from a location change
812-
// that we've initiated ourselves, because we might accidentally abort a legitimate
813-
// transition initiated from code?
814-
if (shouldTriggerReload(to, from, locals, options)) {
815-
if (to.self.reloadOnSearch !== false) $urlRouter.update();
816-
$state.transition = null;
817-
return $q.when($state.current);
809+
if (to === from && !options.reload) {
810+
var isDynamic = false;
811+
812+
if (toState.url) {
813+
var changes = {};
814+
815+
forEach(toParams, function(val, key) {
816+
if (val != $stateParams[key]) changes[key] = val;
817+
});
818+
819+
isDynamic = objectKeys(changes).length && $urlRouter.isDynamic(toState.url, changes);
820+
821+
if (isDynamic) {
822+
$stateParams.$set(changes);
823+
$urlRouter.push(toState.url, $stateParams, { replace: true });
824+
$urlRouter.update(true);
825+
}
826+
}
827+
828+
if (isDynamic || locals === from.locals) {
829+
if (!isDynamic) $urlRouter.update();
830+
$state.transition = null;
831+
return $q.when($state.current);
832+
}
818833
}
819834

820835
// Filter parameters before we pass them to event handlers etc.
@@ -905,6 +920,8 @@ function $StateProvider( $urlRouterProvider, $urlMatcherFactory) {
905920
$state.params = toParams;
906921
copy($state.params, $stateParams);
907922
$state.transition = null;
923+
$stateParams.$sync();
924+
$stateParams.$off();
908925

909926
if (options.location && to.navigable) {
910927
$urlRouter.push(to.navigable.url, to.navigable.locals.globals.$stateParams, {
@@ -1190,14 +1207,86 @@ function $StateProvider( $urlRouterProvider, $urlMatcherFactory) {
11901207

11911208
return $state;
11921209
}
1210+
}
11931211

1194-
function shouldTriggerReload(to, from, locals, options) {
1195-
if (to === from && ((locals === from.locals && !options.reload) || (to.self.reloadOnSearch === false))) {
1196-
return true;
1212+
$StateParamsProvider.$inject = [];
1213+
function $StateParamsProvider() {
1214+
1215+
var observers = {}, current = {};
1216+
1217+
function unhook(key, func) {
1218+
return function() {
1219+
forEach(key.split(" "), function(k) {
1220+
observers[k].splice(observers[k].indexOf(func), 1);
1221+
});
11971222
}
11981223
}
1224+
1225+
function observeChange(key, val) {
1226+
if (!observers[key] || !observers[key].length) return;
1227+
1228+
forEach(observers[key], function(func) {
1229+
func();
1230+
});
1231+
}
1232+
1233+
function StateParams() {
1234+
}
1235+
1236+
StateParams.prototype.$digest = function() {
1237+
forEach(this, function(val, key) {
1238+
if (val == current[key] || !this.hasOwnProperty(key)) return;
1239+
current[key] = val;
1240+
observeChange(key, val);
1241+
}, this);
1242+
};
1243+
1244+
StateParams.prototype.$set = function(params) {
1245+
forEach(params, function(val, key) {
1246+
this[key] = val;
1247+
observeChange(key);
1248+
}, this);
1249+
this.$sync();
1250+
};
1251+
1252+
StateParams.prototype.$sync = function() {
1253+
copy(this, current);
1254+
};
1255+
1256+
StateParams.prototype.$off = function() {
1257+
observers = {};
1258+
};
1259+
1260+
StateParams.prototype.$localize = function(state) {
1261+
var localized = new StateParams();
1262+
1263+
forEach(state.params, function(val, key) {
1264+
localized[key] = this[key];
1265+
}, this);
1266+
return localized;
1267+
};
1268+
1269+
StateParams.prototype.$observe = function(key, func) {
1270+
forEach(key.split(" "), function(k) {
1271+
(observers[k] || (observers[k] = [])).push(func);
1272+
});
1273+
return unhook(key, func);
1274+
};
1275+
1276+
this.$get = $get;
1277+
$get.$inject = ['$rootScope'];
1278+
function $get( $rootScope) {
1279+
1280+
var global = new StateParams();
1281+
1282+
$rootScope.$watch(function() {
1283+
global.$digest();
1284+
});
1285+
1286+
return global;
1287+
}
11991288
}
12001289

12011290
angular.module('ui.router.state')
1202-
.value('$stateParams', {})
1291+
.provider('$stateParams', $StateParamsProvider)
12031292
.provider('$state', $StateProvider);

‎src/urlRouter.js

+25
Original file line numberDiff line numberDiff line change
@@ -397,6 +397,31 @@ function $UrlRouterProvider( $locationProvider, $urlMatcherFactory) {
397397
port = (port === 80 || port === 443 ? '' : ':' + port);
398398

399399
return [$location.protocol(), '://', $location.host(), port, slash, url].join('');
400+
},
401+
402+
/**
403+
* @ngdoc function
404+
* @name ui.router.router.$urlRouter#shouldReload
405+
* @methodOf ui.router.router.$urlRouter
406+
*
407+
* @description
408+
* Accepts a set of parameters and determines whether a reload should be performed, or
409+
* whether the parameters should be updated inline (i.e. if the parameters have been
410+
* flagged as being dynamic).
411+
*
412+
* @param {UrlMatcher} url The URL against which the parameters are being checked.
413+
* @param {Object} params The object hash of parameters to check.
414+
* @return {Boolean} Returns `true` if the parameters should be updated inline, or `false`
415+
* if they should trigger a reload.
416+
*/
417+
isDynamic: function(urlMatcher, params) {
418+
var cfg, result = objectKeys(params).length > 0;
419+
420+
forEach(params, function(val, key) {
421+
cfg = urlMatcher.parameters(key) || {};
422+
result = result && (cfg.dynamic === true);
423+
});
424+
return result;
400425
}
401426
};
402427
}

‎test/stateDirectivesSpec.js

+9-3
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ describe('uiStateRef', function() {
128128
$q.flush();
129129

130130
expect($state.current.name).toEqual('contacts.item.detail');
131-
expect($stateParams).toEqual({ id: 5 });
131+
expect($stateParams).toEqualData({ id: 5 });
132132
}));
133133

134134
it('should transition when given a click that contains no data (fake-click)', inject(function($state, $stateParams, $q) {
@@ -145,13 +145,14 @@ describe('uiStateRef', function() {
145145
$q.flush();
146146

147147
expect($state.current.name).toEqual('contacts.item.detail');
148-
expect($stateParams).toEqual({ id: 5 });
148+
expect($stateParams).toEqualData({ id: 5 });
149149
}));
150150

151151
it('should not transition states when ctrl-clicked', inject(function($state, $stateParams, $q) {
152152
expect($state.$current.name).toEqual('top');
153-
triggerClick(el, { ctrlKey: true });
153+
expect($stateParams).toEqualData({});
154154

155+
triggerClick(el, { ctrlKey: true });
155156
timeoutFlush();
156157
$q.flush();
157158

@@ -161,6 +162,7 @@ describe('uiStateRef', function() {
161162

162163
it('should not transition states when meta-clicked', inject(function($state, $stateParams, $q) {
163164
expect($state.$current.name).toEqual('top');
165+
expect($stateParams).toEqualData({});
164166

165167
triggerClick(el, { metaKey: true });
166168
timeoutFlush();
@@ -172,6 +174,7 @@ describe('uiStateRef', function() {
172174

173175
it('should not transition states when shift-clicked', inject(function($state, $stateParams, $q) {
174176
expect($state.$current.name).toEqual('top');
177+
expect($stateParams).toEqualData({});
175178

176179
triggerClick(el, { shiftKey: true });
177180
timeoutFlush();
@@ -183,6 +186,7 @@ describe('uiStateRef', function() {
183186

184187
it('should not transition states when middle-clicked', inject(function($state, $stateParams, $q) {
185188
expect($state.$current.name).toEqual('top');
189+
expect($stateParams).toEqualData({});
186190

187191
triggerClick(el, { button: 1 });
188192
timeoutFlush();
@@ -206,6 +210,8 @@ describe('uiStateRef', function() {
206210

207211
it('should not transition states if preventDefault() is called in click handler', inject(function($state, $stateParams, $q) {
208212
expect($state.$current.name).toEqual('top');
213+
expect($stateParams).toEqualData({});
214+
209215
el.bind('click', function(e) {
210216
e.preventDefault();
211217
});

‎test/stateSpec.js

+23-12
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ describe('state', function () {
2626
H = { data: {propA: 'propA', propB: 'propB'} },
2727
HH = { parent: H },
2828
HHH = {parent: HH, data: {propA: 'overriddenA', propC: 'propC'} },
29-
RS = { url: '^/search?term', reloadOnSearch: false },
29+
RS = { url: '^/search?term', params: { term: { dynamic: true } } },
3030
AppInjectable = {};
3131

3232
beforeEach(module(function ($stateProvider, $provide) {
@@ -152,16 +152,27 @@ describe('state', function () {
152152
expect($state.current).toBe(A);
153153
}));
154154

155-
it('doesn\'t trigger state change if reloadOnSearch is false', inject(function ($state, $q, $location, $rootScope){
156-
initStateTo(RS);
157-
$location.search({term: 'hello'});
158-
var called;
155+
it('does not trigger state change if params are dynamic', inject(function ($state, $q, $location, $rootScope, $stateParams) {
156+
var called = { change: false, observe: false };
157+
initStateTo(RS, { term: 'goodbye' });
158+
159+
$location.search({ term: 'hello' });
160+
expect($stateParams.term).toBe("goodbye");
161+
159162
$rootScope.$on('$stateChangeStart', function (ev, to, toParams, from, fromParams) {
160-
called = true
163+
called.change = true;
161164
});
165+
166+
$stateParams.$observe('term', function(val) {
167+
called.observe = true;
168+
});
169+
162170
$q.flush();
163-
expect($location.search()).toEqual({term: 'hello'});
164-
expect(called).toBeFalsy();
171+
expect($location.search()).toEqual({ term: 'hello' });
172+
expect($stateParams.term).toBe('hello');
173+
174+
expect(called.change).toBe(false);
175+
expect(called.observe).toBe(true);
165176
}));
166177

167178
it('ignores non-applicable state parameters', inject(function ($state, $q) {
@@ -478,7 +489,7 @@ describe('state', function () {
478489
$q.flush();
479490

480491
expect($state.$current.name).toBe('about.person.item');
481-
expect($stateParams).toEqual({ person: 'bob', id: 5 });
492+
expect($stateParams).toEqualData({ person: 'bob', id: 5 });
482493

483494
$state.go('^.^.sidebar');
484495
$q.flush();
@@ -908,7 +919,7 @@ describe('state', function () {
908919
$state.go('root.sub1', { param2: 2 });
909920
$q.flush();
910921
expect($state.current.name).toEqual('root.sub1');
911-
expect($stateParams).toEqual({ param1: 1, param2: 2 });
922+
expect($stateParams).toEqualData({ param1: 1, param2: 2 });
912923
}));
913924

914925
it('should not inherit siblings\' states', inject(function ($state, $stateParams, $q) {
@@ -921,7 +932,7 @@ describe('state', function () {
921932
$q.flush();
922933
expect($state.current.name).toEqual('root.sub2');
923934

924-
expect($stateParams).toEqual({ param1: 1, param2: undefined });
935+
expect($stateParams).toEqualData({ param1: 1, param2: undefined });
925936
}));
926937
});
927938

@@ -1016,7 +1027,7 @@ describe('state', function () {
10161027
});
10171028
});
10181029

1019-
describe('state queue', function(){
1030+
describe('state queue', function() {
10201031
angular.module('ui.router.queue.test', ['ui.router.queue.test.dependency'])
10211032
.config(function($stateProvider) {
10221033
$stateProvider

‎test/urlRouterSpec.js

+14
Original file line numberDiff line numberDiff line change
@@ -199,6 +199,20 @@ describe("UrlRouter", function () {
199199
expect($urlRouter.href(matcher, { param: 5 })).toBeNull();
200200
}));
201201
});
202+
203+
describe("reload checking", function() {
204+
it("should check UrlMatcher parameters", inject(function($urlRouter) {
205+
var m = new UrlMatcher('/:foo/:bar/:baz', {
206+
params: {
207+
foo: { dynamic: true },
208+
bar: { dynamic: true },
209+
baz: {}
210+
}
211+
});
212+
expect($urlRouter.isDynamic(m, { foo: "1", bar: "2" })).toBe(true);
213+
expect($urlRouter.isDynamic(m, { bar: "1", baz: "2" })).toBe(false);
214+
}));
215+
});
202216
});
203217

204218
});

0 commit comments

Comments
 (0)