कोणीय जेएस बूटस्ट्रैप मोडल

Question

पर डेटा पास कर रहा है मुझे लगता है कि मुझे कुछ याद आ रहा है लेकिन यह नहीं समझ सकता।
मूल रूप से मैं नीचे की तरह मोडल को ऑब्जेक्ट पास करने की कोशिश कर रहा हूं, लेकिन पास ऑब्जेक्ट प्राप्त करने के बजाय मुझे शून्य मिलती है ... इसलिए मुझे लगता है कि दायरे में समस्या है लेकिन मैं कोणीय में नया हूं और कुछ मदद की ज़रूरत है ।

नियंत्रक

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

देखें

<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

मैं आप के बजाय एक ही controller फिर से उत्तीर्ण होने की अपनी खुद की नियंत्रक के scope पारित करने के लिए, आप भी resolve निकाल सकते हैं कि ऐसा करने से सुझाव देना चाहेंगे।

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

नहीं तो आप एक नया controller बना सकते हैं और जबकि इसे खोलने modal के लिए कि नियंत्रक सौंपने होंगे।

Answer 2

जब आप संकल्प का उपयोग करते हैं, तो नक्शा दिए गए नियंत्रक में इंजेक्शन दिया जाता है।

मैं अनुशंसा करता हूं कि आप मोडल कार्यक्षमता को संभालने के लिए एक अलग नियंत्रक का उपयोग करें (separation of concerns)।

मैं कोड के न्यूनीकरण का समर्थन करने के लिए निर्भरता इंजेक्शन का उपयोग करने की भी सिफारिश करता हूं। कोणीय ट्यूटोरियल पर Step 5 इसे समझाएं।

मोडल नियंत्रक का एक सरल उदाहरण होगा।

(function() { 

    'use strict'; 

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

    app.controller('musicDetailController', 

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

      $scope.items = items; 

     }]); 
}()); 

Answer 3

आप सीधे ऑब्जेक्ट पास नहीं कर सकते हैं।

मैंने ऊपर दिए गए सभी समाधानों का प्रयास किया है, लेकिन वास्तव में संतुष्ट नहीं था। मैंने एक साधारण पार्सर लिखकर इस मुद्दे को हल किया है जो आपको प्रदान किए गए समाधान फ़ंक्शन के माध्यम से strings और objects दोनों को मोडल पर सीधे पास करने में सक्षम बनाता है।

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

}]); 

---

जब usings तार

टेम्पलेट:

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

घटक:

bindings: { 
    resolve: '@' 
} 

---

वस्तुओं का उपयोग करते समय

टेम्पलेट:

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

घटक:

bindings: { 
    resolve: '<' 
} 

Answer 4

मैं नीचे दिए गए कोड काम कर रहे है:

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