AngularJS Daten an Bootstrap Modal

Question

übergeben Ich denke, dass ich etwas vermisse, aber nicht was kann.
Im Grunde versuche ich ein Objekt wie unten an das Modal zu übergeben, aber anstatt das übergebene Objekt zu bekommen, bekomme ich null ... also denke ich, ist ein Problem mit dem Oszilloskop, aber ich bin neu in Angular und brauche etwas Hilfe .

-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; 
}; 
}); 

Ansicht

<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

Ich würde vorschlagen, dass Sie die scope Ihren eigenen Controller zu übergeben, anstatt wieder gleiche controller vorbei, indem Sie, dass Sie die resolve auch entfernen können.

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

Andernfalls müssen Sie eine neue controller erstellen und diesen Controller für modal zuordnen, während es zu öffnen.

Answer 2

Wenn Sie auflösen verwenden, wird die Karte in den angegebenen Controller injiziert.

Ich empfehle, dass Sie einen anderen Controller verwenden, um die modale Funktionalität zu handhaben (separation of concerns).

Ich empfehle auch, Dependency Injection zu verwenden, um die Minimierung des Codes zu unterstützen. Step 5 auf dem Angular Tutorial wird dies erklären.

Ein vereinfachtes Beispiel des modalen Controllers wäre.

(function() { 

    'use strict'; 

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

    app.controller('musicDetailController', 

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

      $scope.items = items; 

     }]); 
}()); 

Answer 3

Sie können ein Objekt nicht direkt übergeben.

Ich habe alle oben genannten Lösungen versucht, war aber nicht wirklich zufrieden. Ich habe das Problem gelöst, indem ich einen einfachen Parser geschrieben habe, der es ermöglicht, sowohl strings als auch objects über die bereitgestellte Auflösungsfunktion direkt an das Modal zu übergeben.

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; 
     } 
    } 

}]); 

---

Wenn usings Saiten

Vorlage:

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

Komponente:

bindings: { 
    resolve: '@' 
} 

---

Bei der Verwendung von Objekten

Vorlage:

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

Komponente:

bindings: { 
    resolve: '<' 
} 

Answer 4

habe ich den folgenden Code Arbeits:

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