AngularJS che passa i dati al bootstrap modale

Question

Penso che mi manchi qualcosa ma non riesco a capire cosa.
Fondamentalmente sto provando a passare un oggetto alla modale come sotto, ma invece di ottenere l'oggetto passato ottengo null ... quindi penso che sia un problema con lo scope ma sono nuovo in Angular e ho bisogno di aiuto .

controller

app.controller("musicViewModel", function ($scope, $http, $location, $uibModal, $log) { 

$scope.selected = null; 

$scope.open = function (item) { 

    $scope.selected = item; 

    $log.info('Open' + $scope.selected); // get right passes object 

    var modalInstance = $uibModal.open({ 
     templateUrl: 'myModalContent.html', 
     controller: 'musicViewModel', 
     size: 'lg', 
     resolve: { 
      items: function() { 
       return $scope.selected; 
      } 
     } 
    }); 
}; 

$scope.toggleAnimation = function() { 
    $scope.animationsEnabled = !$scope.animationsEnabled; 
}; 
}); 

View

<div class="row" ng-controller="musicViewModel"> 
    <script type="text/ng-template" id="myModalContent.html"> 
     <div class="modal-header"> 
      <h3 class="modal-title">I'm a modal!</h3> 
     </div> 
     <div class="modal-body"> 
      <ul> 
       <li> 
        {{ selected }} // always gets null 
       </li> 
      </ul> 
     </div> 
    </script> 
</div> 

Answer 1

io suggerirei di passare il scope del proprio controllore, invece di passare stessa controller ancora una volta, così facendo è possibile rimuovere la resolve anche.

var modalInstance = $uibModal.open({ 
    templateUrl: 'myModalContent.html', 
    scope: $scope, //passed current scope to the modal 
    size: 'lg' 
}); 

In caso contrario è necessario creare un nuovo controller e assegnare tale controller per modal durante l'apertura di esso.

Answer 2

Quando si utilizza la risoluzione, la mappa viene iniettata nel controller specificato.

Si consiglia di utilizzare un controller diverso per gestire la funzionalità modale (separation of concerns).

Si consiglia inoltre di utilizzare l'iniezione delle dipendenze per supportare la minificazione del codice. Step 5 sul tutorial angolare per spiegarlo.

Un esempio semplificato del controller modale sarebbe.

(function() { 

    'use strict'; 

    var app = angular.module('App'); 

    app.controller('musicDetailController', 

       ['$scope', '$uibModalInstance', 'items', 
     function ($scope, $uibModalInstance, items) { 

      $scope.items = items; 

     }]); 
}()); 

Answer 3

Non è possibile passare direttamente un oggetto.

Ho provato tutte le soluzioni sopra, ma non sono stato davvero soddisfatto. Ho risolto il problema scrivendo un semplice parser che consente di passare sia strings e objects direttamente al modale, tramite la funzione di risoluzione fornita.

app.controller('ModalController', ['$uibModal', '$scope', function ($uibModal, $scope) { 

    // Initialize $modal 
    var $modal = this; 

    // Open component modal 
    $modal.open = function (component, size, data) { 

     // Init modal 
     var modalInstance = $uibModal.open({ 
      ariaLabelledBy: 'modal-title', 
      ariaDescribedBy: 'modal-body', 
      component: component, 
      size: size || 'md', 
      resolve: parseResolve(data) 
     }); 
    }; 

    // Parse the resolve object 
    function parseResolve(data) { 
     if (typeof data === 'string') { 
      return { 
       data: function() { 
        return data; 
       } 
      } 
     } 
     else if (typeof data === 'object') { 
      var resolve = {}; 
      angular.forEach(data, function(value, key) { 
       resolve[key] = function() { 
        return value; 
       } 
      }) 
      return resolve; 
     } 
    } 

}]); 

---

Quando usings stringhe

Template:

<button ng-click="$modal.open('modalSomething', 'md', 'value'"> 
    Click 
</button> 

Componente:

bindings: { 
    resolve: '@' 
} 

---

Quando si utilizzano oggetti

Template:

<button ng-click="$modal.open('modalSomething', 'md', {key1: value1, key2: value2})"> 
    Click 
</button> 

Componente:

bindings: { 
    resolve: '<' 
} 

Answer 4

ho ottenuto il lavoro codice qui sotto:

this.OpenModal = function() { 
     var modalInstance = $uibModal.open({ 
      url: "/name?parameter=" + $scope.Object.ParamValue, 
      templateUrl: 'views/module/page.html', 
      controller: myController 
     }); 
    }