angularjs - बूटस्ट्रैप-यू मोडल के साथ ui-router का उपयोग करना




angular-ui-router bootstrap-modal (3)

मुझे पता है कि इसे कई बार कवर किया गया है और ज्यादातर आलेख कोड के इस बिट को संदर्भित करते हैं: अंगुलोज़ में कस्टम यूआरएल के साथ मोडल विंडो

लेकिन मुझे ये नहीं मिलता। मुझे बिल्कुल नहीं पता है कि यह बिल्कुल स्पष्ट है। मुझे यह जेएसफ़िल्ड मिला जो वास्तव में महान था, बहुत ही उपयोगी था, सिवाय इसके कि यह यूआरएल नहीं जोड़ता है और मेरे पास मोडल को बंद करने के लिए वापस बटन का उपयोग करने की अनुमति देती है।

संपादित करें: यह है कि मुझे इसके लिए सहायता की आवश्यकता है।

तो मुझे यह समझाने की कोशिश करें कि मैं क्या हासिल करने की कोशिश कर रहा हूं। मेरे पास एक नया आइटम जोड़ने का एक रूप है, और मेरे पास एक लिंक 'नया आइटम जोड़ें' है मुझे लगता है कि जब मैं 'नया आइटम जोड़ता हूं' पर क्लिक करता हूं तो एक मॉडल के रूप में मैंने 'ऐड-मद-एचटीएमएल' बना दिया है। यह एक नया राज्य है, ताकि यूआरएल में परिवर्तन / ऐड-आइटम हो। मैं फॉर्म भर सकता हूं और फिर उसे बचाने या बंद करने का विकल्प चुन सकता हूं। बंद करें, मोडल बंद हो जाता है: p (कैसे अजीब) लेकिन मैं भी साथ ही मोडल को बंद करने के लिए वापस वापस क्लिक कर सकता हूं और पिछले पेज (राज्य) पर वापस लौट सकता हूं। मुझे इस बिंदु को बंद करने में मदद की ज़रूरत नहीं है क्योंकि मैं अभी भी कामकाजी काम कर रहा हूं।

यह मेरा कोड है क्योंकि यह खड़ा है:

नेविगेशन नियंत्रक: (क्या यह भी मॉडल का काम करने के लिए सही जगह है?)

angular.module('cbuiRouterApp')
  .controller('NavbarCtrl', function ($scope, $location, Auth, $modal) {
    $scope.menu = [{
      'title': 'Home',
      'link': '/'
    }];

    $scope.open = function(){

        // open modal whithout changing url
        $modal.open({
          templateUrl: 'components/new-item/new-item.html'
        });

        // I need to open popup via $state.go or something like this
        $scope.close = function(result){
          $modal.close(result);
        };
      };

    $scope.isCollapsed = true;
    $scope.isLoggedIn = Auth.isLoggedIn;
    $scope.isAdmin = Auth.isAdmin;
    $scope.getCurrentUser = Auth.getCurrentUser;

    $scope.logout = function() {
      Auth.logout();
      $location.path('/login');
    };

    $scope.isActive = function(route) {
      return route === $location.path();
    };
  });

इस प्रकार मैं मॉडल को सक्रिय कर रहा हूं:

 <li ng-show='isLoggedIn()' ng-class='{active: isActive("/new-item")}'>
   <a href='javascript: void 0;' ng-click='open()'>New Item</a>
 </li>

नई-item.html:

<div class="modal-header">
  <h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
  <ul>
    <li ng-repeat="item in items"><a ng-click="selected.item = item">{{ item }}</a></li>
  </ul>Selected:<b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
  <button ng-click="ok()" class="btn btn-primary">OK</button>
  <button ng-click="close()" class="btn btn-primary">OK</button>
</div>

इसके अलावा जब यह एक मोडल खोलता है, इसे बंद नहीं करता है, क्योंकि मैं इसे बाहर नहीं कर सका।


$ मोडल के पास कोई करीबी () फ़ंक्शन नहीं है, मेरा मतलब है यदि आप console.log ($ modal), आप देख सकते हैं कि सिर्फ एक खुले () फ़ंक्शन है

मोडल को बंद करना $ modalInstance ऑब्जेक्ट पर निर्भर है, कि आप अपने modalController में उपयोग कर सकते हैं

तो यह: $ modal.close (परिणाम) वास्तव में एक समारोह नहीं है!

सूचना: console.log ($ modal); == >> परिणाम:

          Object { open: a.$get</k.open() }
           // see ? just open ! , no close !

इसका समाधान करने का एक तरीका है, एक तरीका है:

सबसे पहले आपको अपने मॉडेल में एक नियंत्रक को इस तरह परिभाषित करना होगा:

   $modal.open({
      templateUrl: 'components/new-item/new-item.html',
      controller:"MyModalController"
    });

और फिर, बाद में,:

    app.controller('MyModalController',function($scope,$modalInstance){
      $scope.closeMyModal = function(){
       $modalInstance.close(result);
        }
       // Notice that, This $scope is a seperate scope from your NavbarCtrl,
       // If you want to have that scope here you must resolve it

   });

यह एक राज्य के दृश्य घटक के रूप में एक मॉडल के बारे में सोचना सहज है। एक दृश्य टेम्प्लेट, एक नियंत्रक के साथ एक राज्य परिभाषा ले लो और शायद कुछ हल हो जाए इनमें से प्रत्येक फीचर भी मॉडल की परिभाषा पर लागू होता है। एक कदम आगे जाएं और मोडल को बंद करने के लिए मोडल और राज्य निकास खोलने के लिए राज्य एंट्री लिंक करें, और अगर आप सभी ui-sref कर सकते हैं तो आपके पास एक तंत्र है जिसका इस्तेमाल ui-sref या $state.go साथ एक राज्य की तरह किया जा सकता है $state.go निकास के लिए प्रविष्टि और बैक बटन या अधिक मॉडल-विशिष्ट ट्रिगर्स के लिए जाएं

मैंने इसे काफी बड़े पैमाने पर अध्ययन किया है, और मेरा दृष्टिकोण एक मॉडल राज्य प्रदाता बनाना था जो कि राज्यों को परिभाषित करने के लिए मॉड्यूल को कॉन्फ़िगर करते समय समान रूप से $stateProvider राज्य प्रदाता के लिए उपयोग किया जा सकता था जो कि मोडल के लिए बाध्य थे उस समय, मैं विशेष रूप से राज्य और मंडल की घटनाओं के माध्यम से मॉडल की बर्खास्तगी पर एकजुट नियंत्रण में दिलचस्पी रहा था, जो आपके लिए पूछ रहे हैं उससे अधिक जटिल हो जाता है, इसलिए यह एक सरल उदाहरण है

कुंजी राज्य की ज़िम्मेदारी बना रहा है और हुकों का उपयोग कर रहा है जो मोडल द्वारा स्वतंत्र आदान-प्रदान के साथ सिंक्रनाइज़ेशन में रखने के लिए प्रदान करता है जो मोडल या उसके यूआई के माध्यम से समर्थन करता है।

.provider('modalState', function($stateProvider) {
    var provider = this;
    this.$get = function() {
        return provider;
    }
    this.state = function(stateName, options) {
        var modalInstance;
        $stateProvider.state(stateName, {
            url: options.url,
            onEnter: function($modal, $state) {
                modalInstance = $modal.open(options);
                modalInstance.result['finally'](function() {
                    modalInstance = null;
                    if ($state.$current.name === stateName) {
                        $state.go('^');
                    }
                });
            },
            onExit: function() {
                if (modalInstance) {
                    modalInstance.close();
                }
            }
        });
    };
})

राज्य की प्रविष्टि मोडल की शुरूआत राज्य निकास इसे बंद कर देता है मॉडल अपने दम पर बंद हो सकता है (उदा: पृष्ठभूमि क्लिक के माध्यम से), इसलिए आपको इसका पालन करना होगा और राज्य को अपडेट करना होगा।

इस दृष्टिकोण का लाभ यह है कि आपका ऐप मुख्य रूप से राज्यों और राज्य से संबंधित अवधारणाओं के साथ बातचीत करता रहा है। यदि आप बाद में एक परंपरागत दृश्य या उपाध्यक्ष के विपरीत मॉडल को बदलने का निर्णय लेते हैं, तो बहुत कम कोड बदलने की आवश्यकता होती है।






angular-bootstrap