टेम्पलेट लोड करने में विफल: रेल ऐप पर रूबी में टेम्पलेट/टाइपहेड/typeahead.html

Question

मेरे पास रेल परियोजना पर मेरी रूबी में एक कोणीय-एप चल रहा है और अब मैं angular.js का उपयोग करके कुछ टाइपहेड खोज को कार्यान्वित करना चाहता हूं और नहीं ढूंढ सकता समाधान typeahead directive running कैसे बनाना है।

प्रश्न: मेरे प्रोजेक्ट में कोणीय टाइपहेड निर्देश कैसे स्थापित करें?

वर्तमान समाधान वर्णित bellow मैं इस सांत्वना मिल रहा है के साथ

:

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/template/typeahead/typeahead.html 

• एनजी-ऐप काम कर रहा है और संबंधित js और सीएसएस फ़ाइलों के रूप में अच्छी तरह से html में जुड़े। इस स्रोत

मैं अनुसरण कर रहा हूं: bootstrap-ui-angularjs

क्या मैं पहले से ही किया था:

1. public\assets\javascripts निर्देशिका

2. प्रकट संपत्ति पाइप लाइन के रूप में आम तौर पर में angular-ui-bootstrap.js डाउनलोड किया गया:

   // = jquery // = की आवश्यकता है jquery_ujs // = jquery.tokeninput // = की आवश्यकता है बूटस्ट्रैप // = कोणीय // = कोणीय-UI-बूटस्ट्रैप // = requ_tree की आवश्यकता है।

3.checked अगर js पृष्ठ पर कर रहे हैं: (सिर्फ सवाल में स्क्रिप्ट)

<link href="/assets/bootstrap.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script> 
<script src="/assets/angular.js?body=1" type="text/javascript"></script> 
<script src="/assets/angular-ui-bootstrap.js?body=1" type="text/javascript"></script> 

---

my ng-app: 

    <div ng-app='plunker'> 

     <div class='container-fluid' ng-controller="TypeaheadCtrl"> 
     <pre>Model: {{result | json}}</pre> 
     <input type="text" ng-model="result" typeahead="suggestion for suggestion in cities($viewValue)"> 
     </div> 

    </div> 

<script> 

    angular.module('plunker', ['ui.bootstrap']); 
    function TypeaheadCtrl($scope, $http, limitToFilter) { 

     //http://www.geobytes.com/free-ajax-cities-jsonp-api.htm 

     $scope.cities = function(cityName) { 
      return $http.jsonp("http://gd.geobytes.com/AutoCompleteCity?callback=JSON_CALLBACK &filter=US&q="+cityName).then(function(response){ 
       return limitToFilter(response.data, 15); 
      }); 
     }; 

    } 

</script> 

वहाँ कुछ है कि मैं क्या संबंध में याद आ रही है मौजूदा कोणीय निर्देशों को स्थापित करने के लिए है ? जैसे this link

Answer 1

गीटहब कोड में folder called template भी है, जिसके अंदर टाइपहेड के लिए टेम्पलेट फ़ोल्डर है। क्या आपने इसे डाउनलोड किया है और सही जगह पर अपनी परियोजना में जोड़ा है।

त्रुटि इस Typeahead टेम्पलेट html फ़ाइल गुम होने के कारण आने वाले जा रहा है। यदि यह जोड़ा गया है तो यह जांचें कि क्या स्थान सही है या नहीं।

Answer 2

समाधान:

1. 1.

Answer 3

आप अपने वेब पेज के लिए टेम्पलेट्स जोड़ सकते हैं चरण में बनाए गए निर्देशिका में this source से एक नया फ़ोल्डर public\template\typeahead

डाउनलोड typeahead.html बनाने अगर ui-bootstrap-tpls.js फ़ाइल काम नहीं करती है या आप ui-bootstrap का उपयोग करना चाहते हैं।जेएस फ़ाइल:

<script type="text/ng-template" id="template/typeahead/typeahead-popup.html"> 
<ul class="dropdown-menu" ng-if="isOpen()" ng-style="{top: position.top+'px', left: position.left+'px'}" style="display: block;" role="listbox" aria-hidden="{{!isOpen()}}"> 
    <li ng-repeat="match in matches track by $index" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option" id="{{match.id}}"> 
     <div typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div> 
    </li> 
</ul> 
</script> 

<script type="text/ng-template" id="template/typeahead/typeahead-match.html"> 
    <a tabindex="-1" bind-html-unsafe="match.label | typeaheadHighlight:query"></a> 
</script> 

Answer 4

सही .js फ़ाइल को शामिल करना सुनिश्चित करें जिसमें टेम्पलेट्स शामिल हैं।

मैं के साथ "ui-बूटस्ट्रैप-tpls.min.js"

यह मेरे लिए यह तय प्रतिस्थापित "ui-bootstrap.min.js"। यह भी देखें What is the difference between ui-bootstrap-tpls.min.js and ui-bootstrap.min.js?

Answer 5

ui-bootstrap.js का उपयोग करने के बजाय, आप ui-bootstrap-tpls.js का उपयोग कर सकते हैं। यह जेएस फ़ाइल टेम्पलेट्स के साथ आता है।

ui-बूटस्ट्रैप-tpls.js उपयोग करने के लिए आप अपने html में js फ़ाइल जोड़ने के लिए:

angular.module('myModule', ['ui.bootstrap', 'ui.bootstrap.typeahead']); 

:

<script src="/scripts/angular-ui/ui-bootstrap-tpls.js"></script> 

और अपने मॉड्यूल में आप इन निर्भरताओं जोड़ने के लिए यदि आप इन 2 चरणों को करते हैं तो आपको यह संदेश अब और नहीं मिलेगा:

संसाधन लोड करने में विफल:: सर्वर 404 (नहीं मिला) _http स्थिति के साथ जवाब दिया: // स्थानीय होस्ट: 3000/टेम्पलेट/Typeahead/typeahead.html

क्या अक्सर ऐसा होता है कि लोगों को केवल js फ़ाइल जोड़ने और निर्भरता जोड़ना भूल है मॉड्यूल के लिए।