Jak przekazać parametry do modalu?

Aby przekazać parametr należy użyć resolve i wprowadzić elementy w kontrolerze

$scope.Edit = function (Id) {
   var modalInstance = $modal.open({
      templateUrl: '/app/views/admin/addeditphone.html',
      controller: 'EditCtrl',
      resolve: {
         editId: function () {
           return Id;
         }
       }
    });
}

Teraz jeśli użyjesz W ten sposób:

app.controller('EditCtrl', ['$scope', '$location'
       , function ($scope, $location, editId)

W tym przypadku editId będzie niezdefiniowany. Należy go wstrzyknąć w ten sposób:

app.controller('EditCtrl', ['$scope', '$location', 'editId'
     , function ($scope, $location, editId)

Teraz będzie działać gładko, mam ten sam problem wiele razy, po wstrzyknięciu, wszystko zaczyna działać!

Ten drugi nie działa. Według lekarzy tak powinieneś to zrobić.

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal) {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,
      resolve: {
        test: function () {
          return 'test variable';
        }
      }
    });
};

var ModalInstanceCtrl = function ($scope, $modalInstance, test) {

  $scope.test = test;
};

# Patrz plunkr

Alternatywnie możesz utworzyć nowy zakres i przejść przez params za pomocą opcji scope

var scope = $rootScope.$new();
 scope.params = {editId: $scope.editId};
    $modal.open({
        scope: scope,
        templateUrl: 'template.html',
        controller: 'Controller',
    });

W Twoim modalnym kontrolerze w $scope, nie musisz wtedy przekazywać i itemsProvider ani tego, co kiedykolwiek rozwiązałeś

modalController = function($scope) {
    console.log($scope.params)
}

Można również łatwo przekazać parametry do modal controller przez dodanie nowej właściwości z instancją modal i dostać go do modal controller. Na przykład:

Poniżej znajduje się moje Zdarzenie kliknięcia, na którym chcę otworzyć widok modalny.

 $scope.openMyModalView = function() {
            var modalInstance = $modal.open({
                    templateUrl: 'app/userDetailView.html',
                    controller: 'UserDetailCtrl as userDetail'
                });
                // add your parameter with modal instance
                modalInstance.userName = 'xyz';
        };

Modal Controller:

angular.module('myApp').controller('UserDetailCtrl', ['$modalInstance',
                function ($modalInstance) {
                    // get your parameter from modal instance
                    var currentUser = $modalInstance.userName;
                    // do your work...
                }]);

Powinieneś naprawdę użyć Angular UI do tych potrzeb. Sprawdź to: Angular Ui Dialog

W skrócie, w oknie dialogowym Angular UI możesz przekazać zmienną z kontrolera do kontrolera dialogowego za pomocą resolve. Oto twój kontroler "od":

var d = $dialog.dialog({
  backdrop: true,
  keyboard: true,
  backdropClick: true,
  templateUrl:  '<url_of_your_template>',
  controller: 'MyDialogCtrl',
  // Interesting stuff here.
  resolve: {
    username: 'foo'
  }
});

d.open();

I w Twoim oknie dialogowym kontroler:

angular.module('mymodule')
  .controller('MyDialogCtrl', function ($scope, username) {
  // Here, username is 'foo'
  $scope.username = username;
}

EDIT: od nowej wersji okna dialogowego UI wpis resolve staje się:

resolve: { username: function () { return 'foo'; } }

Możesz po prostu utworzyć funkcję kontrolera i przekazać swoje parametry za pomocą obiektu $ scope.

$scope.Edit = function (modalParam) {
var modalInstance = $modal.open({
      templateUrl: '/app/views/admin/addeditphone.html',
      controller: function($scope) {
        $scope.modalParam = modalParam;
      }
    });
}

Jeśli nie używasz AngularJS UI Bootstrap, oto jak to zrobiłem.

Stworzyłem dyrektywę, która będzie trzymać cały element Twojego modalu i przekompilować element, aby wprowadzić do niego twój zakres.

angular.module('yourApp', []).
directive('myModal',
       ['$rootScope','$log','$compile',
function($rootScope,  $log,  $compile) {
    var _scope = null;
    var _element = null;
    var _onModalShow = function(event) {
        _element.after($compile(event.target)(_scope));
    };

    return {
        link: function(scope, element, attributes) {
            _scope = scope;
            _element = element;
            $(element).on('show.bs.modal',_onModalShow);
        }
    };
}]);

Zakładam, że Twój szablon modalny jest wewnątrz zakresu Twojego kontrolera, a następnie dodaj dyrektywę my-modal do Twojego szablonu. Jeśli zapisałeś klikniętego użytkownika do $ scope.aModel , oryginalny szablon będzie teraz działał.

Uwaga: cały zakres jest teraz widoczny dla Twojego modalu, dzięki czemu możesz również uzyskać dostęp do $ scope.użytkowników w nim.

<div my-modal id="encouragementModal" class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"
      aria-hidden="true">&times;</button>
    <h3>Confirm encouragement?</h3>
  </div>
  <div class="modal-body">
      Do you really want to encourage <b>{{aModel.userName}}</b>?
  </div>
  <div class="modal-footer">
    <button class="btn btn-info"
      ng-click="encourage('${createLink(uri: '/encourage/')}',{{aModel.userName}})">
      Confirm
    </button>
    <button class="btn" data-dismiss="modal" aria-hidden="true">Never Mind</button>
  </div>
</div>