Dropdown in modal does not see Switch controller Angular JS 1.5

Asked

Viewed 289 times

0

good morning.

The problem is this, I have a news feed page and within it I use a Modal Angular UI - Modal to show the information of a specific post. Until then everything quiet, the information and functions that I declare inside the modal controller see the information, however, inside this modal I have a Dropdown with two options, "Delete" and "Edit".

Dropdown

<div class="dropdown menu-feed">
 <span class="glyphicon glyphicon-option-vertical" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 </span>
 <div class="dropdown-menu">                        
  <li><a class="dropdown-item" ng-click="vm.deleteComment()">Excluir</a></li>
 </div>
</div>

Controller Modal

            $uibModal.open({
            templateUrl: 'templates/feed/modal/modalPost.html',
            windowClass: 'post-modal',
            size: 'lg',
            controller: function ($uibModalInstance) {
            var vm = this;    
            vm.deleteComment = deleteComment;
            function deleteComment(){
               console.log('Aqui estou sendo chamado dentro do dropdown');
            }
            },controllerAs:'vm'
            });

However, no function is called, nor the functions that are within the modal ( To which I omitted them here to improve the visualization of the problem).

I tested the variable {{ $index }} inside the modal and I have the return of which Scope I am, but when I enter inside the "li" in the dropdown I have no linked Scope.

Any tips on how to proceed?

angularjs modal angularjs-scope angular-ui-bootstrap angular-ui

1 answer

2

Pass current scope reference to uibModal:

$uibModal.open({
    templateUrl: 'templates/feed/modal/modalPost.html',
    scope: $scope, //referência
    [...]

  • When I declare $Scope I call my function in without the right $Scope? Ex: ng-click="deleteComment()" .

  • @Mikaelhadler if you are running this code within a controller, you can inject the $Scope service and pass it as reference.

  • Exactly, I am using it inside another controller, I did both tests, I injected $Scope into my superior controller to the modal controller to test, I passed the modal function and passed $Scope in the modal properties, without success. I removed $Scope from the modal above it and put "Scope: $Scope" in the modal property, passed $Scope as the modal Function parameter and also nothing.

  • When I pass the Scope property: $Scope in the modal properties and pass $Scope in the controller function, I get a return that $Scope has not been set. .

  • Problem solved, I was able to make $Scope work by bypassing the modal property and injecting it into the controller function.

Browser other questions tagged angularjs modal angularjs-scope angular-ui-bootstrap angular-ui

You are not signed in. Login or sign up in order to post.