Why angular controllers don't work when the view is navigated to from another view by changing state

Development
,
1

I’m building an an owa for OpenMRS. I’m using angular 1.5 with components. My project was scaffolded with the openmrs-owa generator.

My component controllers work in some instances and don’t in others. Say I have a component called helloworld-component if you have used the openmrs-owa generator, you’ll know that this means I have a

  • helloWorld.component.js
  • helloWorld.controller.js
  • helloWorld.html

helloWorld.component.js

import template from './helloWorld.html';
import controller from './helloWorld.controller';

let helloWorldComponent = {
    restrict: 'E',
    bindings: {},
    template: template,
    controller: controller,
    controllerAs: 'vm'
};

export default helloWorldComponent;

helloWorld.controller.js

class HelloWorldController {
    constructor() {
        var vm = this;

        vm.buttonClicked = () => {
            console.log("Hello World!!!");
        }
    }
}

export default HelloWorldController;

helloWorld.html

<button ng-click="vm.buttonClicked()">Click Me!!!</button>

inside home.js I have included the component using (a lot of code is excluded)

...
import helloWorldComponent from './components/hello-world/helloWorld.component;
...

.component('helloWorld', helloWorldComponent);

And when I use my component in the

<hello-world></hello-world>

And this works as expected. I see my button that says Click Me!!! and when I click it, it’s logged to the console that Hello World!!!

But if I were to navigate to this component using state change programmatically, clicking on the button won’t work. Let’s say for instance I have a state configuration like

$stateProvider.state('helloWorld', {
   url: '/helloWorld',
   template: require('./components/hello-world/helloWorld.html'),
});

If I navigate to this state by changing programmatically from another components controller or by clicking an ancore tag that has an ui-sref="helloWorld" I still get to see my button that says Click Me!!! but clicking has not effect(that is my controller method is not fired up).

FYI, I’ve not worked with this(Angular 1.x) before. I’ve only used components in Angular 2/4 with typescript. I basically proceed by looking at examples of a sample app generated by the openmrs-owa but there’s nothing in there to help me with this now. I understand JavaScript syntax and have worked with components in Angular 4 so just reading example codebase has been moving on fine until now. cc @raff @pascal

2

I’ve reproduced this on a test project

Inside home.html I have this

And a state config in home.js

When you run the app it shows a button that says Hello World when you click it, it takes you to the code in helloWorld.html which says Click Me

helloWorld.html

helloWorld.controller.js

But when you click on the Click Me button nothing happens(nothing is printed to the logs). But if in the home.html I just call my component there like

<hello-world></hello-world>

It will show the Click Me button and when I click it, “Hello World!!!” is logged to the console.

3

I think I fixed it. Replacing

template: require('./components/hello-world/helloWorld.html')

with

template: '<hello-world></hello-world>'

Fixed it. But that’s basically a try and error. Not sure if I’m in the right direction here.

Thanks and sorry for the ping :slight_smile: