0

Say in a controller function, something like this:

$scope.fakeChangeState = function() {
    $state.go('stay right here and do nothing');
}

And then call it when a button is pressed:

<button ng-click="fakeChangeState()">click</button>

Is something like that possible?

There is a directive that I want to activate when some buttons on the site are clicked. The directive is activated using "$stateChangeStart".

The directive activates just fine when navigating to another page using, for example, the navigation bar. However, there are buttons not part of the navigation, that only change the view (i.e. they edit the content on the page without changing state when they are clicked).

How do we activate the state change directive, without making it change state?

Megawatt
  • 165
  • 3
  • 13
  • I assume you're using Angular UI Router? What version? –  Jun 05 '18 at 17:34
  • Using 0.2.13 @Amy – Megawatt Jun 05 '18 at 17:36
  • Should I just make them link to a route? Is that the best alternative? – Megawatt Jun 05 '18 at 17:48
  • Just to get clear about it. You have a directive watching $stateChangeStart. And now you want to do a click to avoid a state change? What happens after the click? Maybe there is another solution? – Michael Jun 05 '18 at 17:53
  • @Michael So imagine that the page has a navigation bar, all those links change state, no problem with that. Then inside of the page, there are buttons that just change the view i.e. add / change information on the page. How do we make it so that pressing those buttons (that don't change the state), change the state in place without navigating to a different page? – Megawatt Jun 05 '18 at 17:59
  • @Megawatt ok understand. How do you change the view? Or is this the question how to change the view without the state? – Michael Jun 05 '18 at 18:02
  • There are just some existing variables on the page. When the buttons are clicked they just update these values, that's how the view is changed. But I want the directive to activate when the buttons are pressed (the directive activates using "$stateChangeStart") – Megawatt Jun 05 '18 at 18:04
  • You want to change the view like a tab? every tab is a view? :) – Michael Jun 05 '18 at 18:05
  • You might want to consider posting the code for the directive so people understand your problem better. As the question is written right now, my answer is still the correct one which is why I haven't deleted it. – BShaps Jun 05 '18 at 18:06
  • It's really an NG Grid that has hundreds of rows, clicking on a row changes the view to let you view the information for another item in that row. We just want to activate a state change so that when a row is clicked, the directive is activated, then the view is changed. – Megawatt Jun 05 '18 at 18:08
  • @Megawatt Take a look at this SO question. It is probably the right way of doing what it sounds like you're trying to do. [How to call a method defined in an AngularJS directive](https://stackoverflow.com/questions/16881478/how-to-call-a-method-defined-in-an-angularjs-directive) – BShaps Jun 05 '18 at 18:11

2 Answers2

0

You can use the $stateChangeStart event to prevent the navigation to another state (i.e. the default state). I'm not sure when your directive fires so this may be too early for your save directive to trigger.

$rootScope.$on('$stateChangeStart',
function(event, toState, toParams, fromState, fromParams){
    event.preventDefault();
    // transitionTo() promise will be rejected with
    // a 'transition prevented' error
})
BShaps
  • 1,344
  • 7
  • 17
  • Thanks but the save directive already fires using '$stateChangeStart' and the route isn't set up for the links to send them anywhere else nor do they prompt a state change. – Megawatt Jun 05 '18 at 17:42
  • @Megawatt If my answer isn't what you're looking for then your question is not worded properly and should be updated. This is the proper way to prevent a state change from actually happening using `$stateProvider` and `$state.go()` which is what you asked. – BShaps Jun 05 '18 at 17:58
  • Well the question isn't "How do I prevent a state change?" it's more like how do I "Invoke a state change, but stay in the same state", i.e. a fake state change – Megawatt Jun 05 '18 at 18:12
  • This is invoking a state change, but staying in the same state. You are just intercepting it before it transitions and stopping the transition which is the only way to accomplish that aside from doing a `$state.reload`. Take a look at the SO question in my comment above. From everything I've heard it sounds like that is what you are trying to accomplish. It would be easier to help if we could see the directive code – BShaps Jun 05 '18 at 18:15
  • Maybe I am just terrible at explaining the problem. There are buttons on the site and there is no state change at all activated when the buttons are pressed. I'm trying to get them to do a state change, but they do not link anywhere or do anything other than update some variables. "$stateChangeStart" won't help here as the buttons do not invoke any state change so "$stateChangeStart" won't even activate. How do I make the buttons do a state change, but do nothing? i.e. a fake state change – Megawatt Jun 05 '18 at 18:21
  • @Megawatt Other than what I posted, you can't. You are forcing this to depend solely on a state change when you don't have to. It sounds like what you want to do is trigger the save function in your directive from a click event on your view which is explained in the SO question that I linked in the comments under your question. – BShaps Jun 05 '18 at 18:30
  • Thanks but the directive itself is what needs to be called, not the directive calling a function in the controller. It's more like the controller needs to activate the directive, which currently only activates on "$stateChangeStart", so that's why I asked how to fake a state change so it could activate. I'm going to try rewording and reasking the question. – Megawatt Jun 05 '18 at 18:39
  • @Megawatt If you include the code I could probably help you pretty quickly. Code is way easier than trying to imagine how things are interconnected based on explanations. – BShaps Jun 05 '18 at 19:13
0

Solved this by just copying the code from the directive and putting it into the controller code that activates when the buttons were pressed. Apparently I was not good at explaining what the problem was, but just copying the code over solved the problem. This made it so the directive didn't have to be run at all.

Megawatt
  • 165
  • 3
  • 13