AngularJs how to call a ng-click inside a bootstrap modal?

Question

I'm pretty new to AngularJS so this problem might be really easy to solve.

I'm doing a modal, and so far it opens correctly with the template and css working, the only thing that doesn't work is the function inside the template. I have a ng-click, and when I click the function doesn't get called.

modal controller:

export class modalCtrl {
        static $inject = ["$uibModalInstance", "dataList"];
        constructor(private $uibModalInstance: ng.ui.bootstrap.IModalServiceInstance, public dataList: Array<Interfaces.dataList>) { }

        close(): void {
            this.$uibModalInstance.close();
        }
    }
    module.controller("modalCtrl", ModalCtrl);

function to launch the modal in my main controller:

openModal(event: ng.IAngularEvent) {
            event.stopPropagation();
            this.$uibModal.open({
                controller: "modalCtrl",
        controllerAs: "vm",
        resolve: {
                    dataList: () => this.dataList
        },
                templateUrl: "modalTemplate.htm"
            });
        }

the function I'm calling from insde the modal on the ng-click:

 selectDataEntry(item: Interfaces.dataList) {
      this.dataList.forEach(p => p.isSelected = false);
      item.isSelected = true;
      console.log('ngclick works');
    }

so I put inside the resolve of the modal the interface I'm using to retrieve the data, and this solved the other problem I had, the ng-repeat that looped over this interface wasn't working, now it is. But the function doesnt get called, so I guess I need to do something else as well with the scopes, can someone help me? thank you

When the modal is displayed the controller it is referencing is your `modalCtrl` so if the `selectDataEntry()` method does not exist on `modalCtrl` that is why it's not being called. You would have to pass a reference to the function to your modal in order to be able to call it from the modal. See [this question and answer](https://stackoverflow.com/questions/24205102/how-to-pass-a-function-to-angular-ui-bootstrap-modal) for more info. — Lex, May 30 '18 at 14:27

score 1 · Answer 1 · answered May 30 '18 at 20:59

In angular Js, when we create modal dialog , we have to defined the controller and it's template for this mode dialog l which is completely in new scope from where you have called the modal dialog , so if you do any operation it has to be defined in model dialog controller, not in the controller from where you have called modal dialog.

So please define your select entry inside modelCtrl, it will work for sure. As you are new to angular js read from here how to angularjs bootstrap modal https://angular-ui.github.io/bootstrap/

AngularJs how to call a ng-click inside a bootstrap modal?

1 Answers1