2016-12-06 12 views
5

मैं एक मॉडल (संवाद) बनाना चाहता हूं। मैंने आधिकारिक बूटस्ट्रैप दस्तावेज पर उदाहरणों का पालन किया है लेकिन मैं अटक गया। जब मैं मॉडल बनाने के लिए कोशिश कर रहा हूँ मैं एक त्रुटि प्राप्तकोणीय में मॉडल काम नहीं करता है। अनचाहे अस्वीकृति {}

angular.min.js: 122 संभवतः बिना क्रिया अस्वीकृति: {}

mainController:

angular 
.module('app') 
.controller('tlmController', function($scope, $http, $timeout, $uibModal,   DTOptionsBuilder, DataLoader, TestLines) { 
    $scope.openTestLineDetails = function(id) { 
     var modalInstance = $uibModal.open({ 
      size: 'lg', 
      controller: 'testlineDetailsController', 
      templateUrl: 'app/client/layout/testlinedetails.tpl.html', 
      resolve: { 
       testLineId: function() { 
        return id; 
       } 
      } 
     }); 
    }; 
}) 

और TestlineDetailsController:

angular 
.module('app') 
.controller('testlineDetailsController', function($scope, $modalInstance, testLineId) { 


}); 

इस कोड के साथ क्या गलत है? मैं मुख्य नियंत्रक में $ uibModal ($ modal सेवा मौजूद नहीं है) का उपयोग कर रहा हूं। जब मैं $ uibModalInstance द्वारा $ modalInstance को प्रतिस्थापित करता हूं तो मुझे एक त्रुटि भी मिलती है (सेवा $ uibModalInstance मौजूद नहीं है), इसलिए मुझे $ modalInstance के साथ $ uibModal का उपयोग करना होगा। स्ट्रज लेकिन सच है।

+0

क्या आपने अपने मुख्य मॉड्यूल – Sajeetharan

+0

पर यूई-बूटस्ट्रैप इंजेक्शन दिया है हां, मैंने var app = angular.module ('app', ['ngRoute', 'डेटाटेबल्स', 'ui.bootstrap'] किया है); –

+0

क्या आप कोणीय और यूआई बूटस्ट्रैप का संस्करण उपयोग कर रहे हैं? – HoffZ

उत्तर

2

आप, app.config

app.config(['$qProvider', function ($qProvider) { 
    $qProvider.errorOnUnhandledRejections(false); 
}]); 
+4

संवाद अभी भी प्रकट नहीं होता है –

1

सबसे पहले में नीचे दिए गए कोड लिखने की जाँच अपने मोडल नियंत्रक स्क्रिप्ट ब्राउज़र में मुख्य HTML फ़ाइल में जोड़ा जाता है और अगर इसके साथ संलग्न (प्रतीत होता है) (क्रोम में कर सकते हैं, एफ 12 कीबोर्ड बटन के साथ खुले वेब डेवलपर टूल्स और फिर "एलिमेंट्स" टैब बटन खोलें) (यदि आप यमन की टीम से generator-angular जैसे कुछ मचान उपकरण का उपयोग कर रहे हैं, तो अपने कोड से नवीनतम अपडेट प्राप्त करने के लिए कैश साफ़ करना याद रखें) क्योंकि मुझे एक ही समस्या थी :(और मैं लगातार समीक्षा कर रहा था कि मेरे कोड में क्या गलत था, फिर मुझे पता चला कि ब्राउजर मैंने बनाई गई नवीनतम स्क्रिप्ट (मॉडल कंट्रोलर) नहीं लगा रहा था, इसलिए मेरा कोड आपकी तरह था, लेकिन टा राजा अपने कोड उदाहरण: संपादित करें: (यह वैकल्पिक है

 


            
 
<!-- In your index.html file, check for this script being appended in your browser --> 
 
<script src="testlineDetailsController.js"></script>

//In your parent controller 
 
angular 
 
.module('app') 
 
.controller('tlmController', function($scope, $http, $timeout, $uibModal, DTOptionsBuilder, DataLoader, TestLines) { 
 
    $scope.openTestLineDetails = function(id) { 
 
     var modalInstance = $uibModal.open({ 
 
      size: 'lg', 
 
      controller: 'testlineDetailsController', 
 
      templateUrl: 'app/client/layout/testlinedetails.tpl.html', 
 
      resolve: { 
 
       testLineId: function() { 
 
        return id; 
 
       } 
 
      } 
 
     }); 
 
    }; 
 
})

दूसरे, सुनिश्चित करें कि आप मोडल नियंत्रक में मोडल उदाहरण सेवा से कम से कम एक विधि को लागू कर रहे हैं , आप मोडल विकल्प ऑब्जेक्ट से बैकड्रॉप प्रॉपर्टी का उपयोग करके मोडल को छुपा सकते हैं)

//In your modal controller 
 
angular.module('app'). 
 
controller('testlineDetailsController', function ($scope, $uibModalInstance, testLineId) { 
 
      //In case you have the ok and cancel buttons in your modal template 
 
      $scope.id = testLineId; 
 
      $scope.ok = function() { 
 
       $uibModalInstance.close(); 
 
      }; 
 

 
      $scope.cancel = function() { 
 
       $uibModalInstance.dismiss('cancel'); 
 
      }; 
 
      
 
     });

इसके बाद, आपका ऐप काम करना चाहिए।

अब, वहाँ है एक और विकल्प इस मुद्दे का हल करने के लिए, आप सीधे मोडल विकल्पों में से संपत्ति में नियंत्रक समारोह लिख सकते हैं आपत्ति:

//In your parent controller 
 
angular 
 
.module('app') 
 
.controller('tlmController', function($scope, $http, $timeout, $uibModal, DTOptionsBuilder, DataLoader, TestLines) { 
 
    $scope.openTestLineDetails = function(id) { 
 
     var modalInstance = $uibModal.open({ 
 
      size: 'lg', 
 
      //write an anonymous function instead of naming the controller name. 
 
      controller: function ($scope, $uibModalInstance, testLineId) { 
 
       $scope.id = testLineId; 
 
       $scope.ok = function() { 
 
       $uibModalInstance.close(); 
 
       }; 
 
       $scope.cancel = function() { 
 
       $uibModalInstance.dismiss('cancel'); 
 
       }; 
 
      }, 
 
      templateUrl: 'app/client/layout/testlinedetails.tpl.html', 
 
      resolve: { 
 
       testLineId: function() { 
 
        return id; 
 
       } 
 
      } 
 
     }); 
 
    }; 
 
})

यह विकल्प होना चाहिए अपने ऐप में भी काम करें। तो मुझे आशा है कि यह स्पष्टीकरण आपको आपके पास इस मुद्दे को हल करने में मदद करेगा।

संबंधित मुद्दे