angularjs - पीडीएफ को निर्यात करने से पहले कोणीय डेटासेट बनाना




pdf datatables angular-datatables (2)

exportOptions पर एक नज़र exportOptions यह बहुत अच्छी तरह से प्रलेखित नहीं है, इसलिए आपको dataTables.buttons.js में डाइव करना होगा यदि आपको अधिक विवरण चाहिए। लेकिन मूल रूप से आपके पास तालिका के प्रत्येक अनुभाग के लिए फ़ॉर्मेटर कॉलबैक का एक सेट है:

exportOptions: {
  format: {
    header: function( data, column ) {
      ...
    },
    footer: function( data, column ) {
      ...  
    },
    body: function( data, row, column, node ) {
      ...
    }
  }    
}    

मार्कअप को बाहर करने के लिए या अन्य तरीकों से सामग्री को संशोधित करने के लिए इन कॉलबैक का उपयोग करें। मुझे पूरा यकीन नहीं है कि " निर्यात किए गए पीडीएफ में टूलटिप्स टेक्स्ट शामिल हैं ", लेकिन मुझे लगता है कि आप .tooltipstext <span> मिटा .tooltipstext चाहते हैं? data पकड़ <div class="tooltips">sr <span class="tooltipstext">Poistion</span></div> ताकि आप इसे इस तरह jQuery के साथ निकाल सकते हैं:

{
  extend: 'pdfHtml5',
  title: 'My list',
  exportOptions: {
    format: {
      header: function ( data, column ) {
        return $(data).find('.tooltipstext').remove().end().text();
       }
    }
  }
}

अब पीडीएफ कॉलम हैडर में केवल sr शामिल होगा

निर्यात में ग्लाइफ़िकॉन को शामिल करना अधिक कठिन है। आपको vfs_fonts.js को पुन: निर्माण करने की आवश्यकता होगी और इसमें glyphicons-halflings-regular.ttf । यह एक मार्गदर्शिका है जो इसे कैसे करें

https://github.com/bpampuch/pdfmake/wiki/Custom-Fonts---client-side

मैंने कभी खुद का प्रयास नहीं किया है, इसलिए मैं नहीं कह सकता कि क्या कोई नुकसान है

var app = angular.module('myApp', ['datatables', 'datatables.buttons']);
app.controller('MyCtrl', function($scope, DTOptionsBuilder, DTColumnBuilder, DTColumnDefBuilder) {

  $scope.list = [{
      "eid": "10",
      "type": "1",
      "sales": "20",
      "status": "1"
    }, {
      "eid": "20",
      "type": "2",
      "sales": "40",
      "status": "0"
    }, {
      "eid": "30",
      "type": "1",
      "sales": "20",
      "status": "1"
    }
  ];

  $scope.vm = {};

  $scope.vm.dtOptions = DTOptionsBuilder.newOptions()
    .withOption('order', [0, 'asc'])
    .withButtons([
      {
        extend: 'collection',
        text: 'Export',
        buttons: [{
            extend: 'copyHtml5',
            title: 'Mylist'
          },
          {
            extend: 'pdfHtml5',
            title: 'My list'
          }
        ]
      }
    ]);

});
/* Tooltip container */
.tooltips {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltips .tooltipstext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltips:hover .tooltipstext {
    visibility: visible;
}
<html>
        <head>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
          <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
          <script src="https://phpflow.com/demo/angular_datatable_demo/angular-datatables.min.js"></script>
          <script src="https://phpflow.com/demo/angular_datatable_demo/jquery.dataTables.min.js"></script>
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
          <link rel="stylesheet" href="https://phpflow.com/demo/angular_datatable_demo/datatables.bootstrap.css"> 
                      <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css"> 

      <script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.colVis.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
<script src="http://l-lin.github.io/angular-datatables/archives/dist/plugins/buttons/angular-datatables.buttons.min.js"></script>

      </head>
        <div class="container">
        <div ng-app="myApp" ng-controller="MyCtrl">

        <table  class="table table-striped table-bordered" dt-options="vm.dtOptions" dt-column-defs="vm.dtColumnDefs" datatable="ng">
           <thead>
              <tr>
        	    <th><div class="tooltips">sr <span class="tooltipstext">Poistion</span>
</div>   </th>

        	 <th>Employee ID</th>
        	<th>Type</th>
        	<th>sales</th>
          <th>sales_completed</th>

        </thead>
            <tbody>
          
           <tr ng-repeat="data in list">
              <td> {{ $index+1 }} </td>
             
              <td> {{ data.eid }} </td>
              <td> {{ data.type==2? "admin" : "employee"}} </td>
              <td> {{ data.sales }} </td>
            
              <td> 
              
              <span ng-show="{{ data.status }}=='1'"> <div class="tooltips"><i class="glyphicon glyphicon-ok"></i><span class="tooltipstext">Yes</span></div></span>
              <span ng-show="{{ data.status }}=='0'"> <div class="tooltips"><i class="glyphicon glyphicon-remove"></i><span class="tooltipstext">NO</span></div></span>
  
               </td>
                </tr>
        </tbody>
  
        </table>
        </div>

मैं एक्सेल बटन के साथ एन्जिल-डेटाटेबल प्लगइन का उपयोग कर रहा हूं। मैं एक टेबल को पीडीएफ के रूप में निर्यात करने की कोशिश कर रहा हूं जिसमें टूल टिप और ग्लाइफ़िकॉन शामिल हैं। मैं तालिका निर्यात करते समय 2 समस्याओं का सामना कर रहा हूं।

समस्या 1

<th>
    <div class="tooltips">sr <span class="tooltipstext">Poistion</span></div> </th>

निर्यात पीडीएफ में टूलटिप्स पाठ होता है

समस्या 2

<span ng-show="{{ data.status }}=='1'"> <div class="tooltips"><i class="glyphicon glyphicon-ok"></i><span class="tooltipstext">Yes</span></div></span>

<span ng-show="{{ data.status }}=='0'"> <div class="tooltips"><i class="glyphicon glyphicon-remove"></i><span class="tooltipstext">NO</span></div></span>

तालिका ग्लाइफिकॉन निर्यात नहीं कर रही है

मैं टेबल को कैसे स्वरूपित कर सकता हूं ताकि उपकरण युक्तियाँ पाठ को बाहर रखा जाए और निर्यात किए गए पीडीएफ में ग्लाइफीकॉन दिखाया जाए?


त्वरित उत्तर :
एक बच्चे का दायरा आम तौर पर अपने मूल दायरे से प्रोटोटाइपिक रूप से विरासत में मिलता है, लेकिन हमेशा नहीं। इस नियम का एक अपवाद scope: { ... } साथ एक निर्देश scope: { ... } - यह एक "अलग" क्षेत्र बनाता है जो प्रोटोटाइपिक रूप से वारिस नहीं करता है। यह निर्माण अक्सर "पुन: प्रयोज्य घटक" निर्देश बनाते समय उपयोग किया जाता है।

बारीकियों के लिए, दायरा विरासत सामान्य रूप से सीधे है ... जब तक आपको बच्चे के दायरे में 2-तरफा डेटा बाध्यकारी (यानी, फॉर्म तत्व, एनजी-मॉडल) की आवश्यकता नहीं होती है। यदि आप बच्चे के दायरे के अंदर से मूल दायरे में एक आदिम (उदाहरण के लिए, संख्या, स्ट्रिंग, बूलियन) से जुड़ने का प्रयास करते हैं तो एनजी-दोहराना, एनजी-स्विच, और एनजी-शामिल आपको यात्रा कर सकते हैं। यह काम नहीं करता है कि अधिकांश लोगों को उम्मीद है कि इसे काम करना चाहिए। बच्चे के दायरे को अपनी संपत्ति मिलती है जो समान नाम की मूल संपत्ति को छुपा / छाया देती है। आपके कामकाज हैं

  1. अपने मॉडल के लिए माता-पिता में वस्तुओं को परिभाषित करें, फिर बच्चे में उस वस्तु की एक संपत्ति का संदर्भ लें: parentObj.someProp
  2. $ parent.parentScopeProperty का उपयोग करें (हमेशा संभव नहीं है, लेकिन 1 से भी आसान जहां संभव हो)
  3. माता-पिता के दायरे पर एक फ़ंक्शन को परिभाषित करें, और इसे बच्चे से कॉल करें (हमेशा संभव नहीं)

न्यू एंगुलरजेएस डेवलपर्स को अक्सर एहसास नहीं होता है कि ng-repeat , ng-switch , ng-view , ng-include और ng-if सभी नए बच्चे के स्कोप बनाते हैं, तो समस्याएं अक्सर दिखाई देती हैं जब ये निर्देश शामिल होते हैं। (समस्या के त्वरित चित्रण के लिए यह उदाहरण देखें।)

प्राइमेटिव के साथ इस मुद्दे को हमेशा "सर्वोत्तम अभ्यास" के "सर्वोत्तम अभ्यास" का पालन करके आसानी से बचाया जा सकता है अपने एनजी-मॉडल में - 3 मिनट के लायक देखें। मिस्को ने ng-switch साथ आदिम बाध्यकारी समस्या का प्रदर्शन किया।

एक '।' होने आपके मॉडल में यह सुनिश्चित होगा कि प्रोटोटाइप विरासत खेल में है। तो, उपयोग करें

<input type="text" ng-model="someObj.prop1">

<!--rather than
<input type="text" ng-model="prop1">`
-->

लंबा जवाब :

जावास्क्रिप्ट प्रोटोटाइप विरासत

AngularJS विकी पर भी रखा गया: https://github.com/angular/angular.js/wiki/Understanding-Scopes स्कोप

पहले प्रोटोटाइप विरासत की ठोस समझ रखना महत्वपूर्ण है, खासकर यदि आप सर्वर-साइड पृष्ठभूमि से आ रहे हैं और आप कक्षा-संबंधी विरासत से अधिक परिचित हैं। तो आइए पहले इसकी समीक्षा करें।

मान लीजिए कि अभिभावकस्कोप में एस्ट्रिंग, एनम्बर, एनएरे, एओब्जेक्ट और एफ़ंक्शन हैं। यदि बच्चेस्कोप प्रोटोटाइपिक रूप से पेरेंटस्कोप से विरासत में मिलता है, तो हमारे पास है:

(ध्यान दें कि अंतरिक्ष को बचाने के लिए, मैं एक अलग नीली वस्तु के रूप में एक एकल नीली वस्तु के रूप में एक एकल नीली वस्तु के रूप में anArray ऑब्जेक्ट को तीन अलग ग्रे anArray दिखाता हूं।)

यदि हम बच्चे के दायरे से अभिभावकस्कोप पर परिभाषित संपत्ति तक पहुंचने का प्रयास करते हैं, तो जावास्क्रिप्ट पहले बच्चे के दायरे में दिखाई देगा, संपत्ति नहीं ढूंढ पाएगा, फिर विरासत में दिखाई देगा, और संपत्ति ढूंढें। (अगर इसे पेरेंटस्कोप में संपत्ति नहीं मिली, तो यह प्रोटोटाइप श्रृंखला जारी रखेगी ... रूट स्कोप तक सभी तरह से)। तो, ये सब सच हैं:

childScope.aString === 'parent string'
childScope.anArray[1] === 20
childScope.anObject.property1 === 'parent prop1'
childScope.aFunction() === 'parent output'

मान लीजिए कि हम ऐसा करते हैं:

childScope.aString = 'child string'

प्रोटोटाइप श्रृंखला से परामर्श नहीं किया जाता है, और एक नई एस्ट्रिंग संपत्ति बच्चेस्कोप में जोड़ दी जाती है। यह नई संपत्ति उसी नाम के साथ अभिभावकस्कोप संपत्ति को छुपा / छाया देती है। यह बहुत महत्वपूर्ण हो जाएगा जब हम नीचे ng-repeat और ng-include चर्चा करते हैं।

मान लीजिए कि हम ऐसा करते हैं:

childScope.anArray[1] = '22'
childScope.anObject.property1 = 'child prop1'

प्रोटोटाइप श्रृंखला से परामर्श किया जाता है क्योंकि ऑब्जेक्ट्स (anArray और anObject) बच्चेस्कोप में नहीं पाए जाते हैं। ऑब्जेक्ट्स पैरेंटस्कोप में पाए जाते हैं, और मूल मानों पर प्रॉपर्टी मान अपडेट होते हैं। बच्चे के स्थान पर कोई नई संपत्ति नहीं जोड़ा गया है; कोई नई वस्तुएं नहीं बनाई गई हैं। (ध्यान दें कि जावास्क्रिप्ट सरणी और कार्यों में भी ऑब्जेक्ट्स हैं।)

मान लीजिए कि हम ऐसा करते हैं:

childScope.anArray = [100, 555]
childScope.anObject = { name: 'Mark', country: 'USA' }

प्रोटोटाइप श्रृंखला से परामर्श नहीं किया जाता है, और बच्चे के दायरे में दो नए ऑब्जेक्ट गुण होते हैं जो समान नामों के साथ अभिभावक स्कोप ऑब्जेक्ट गुणों को छिपाते / छाया करते हैं।

टेकअवे:

  • अगर हम childScope.propertyX पढ़ते हैं, और बच्चेस्कोप में propertyX है, तो प्रोटोटाइप श्रृंखला से परामर्श नहीं किया जाता है।
  • अगर हम childScope.propertyX सेट करते हैं, तो प्रोटोटाइप श्रृंखला से परामर्श नहीं किया जाता है।

एक आखिरी परिदृश्य:

delete childScope.anArray
childScope.anArray[1] === 22  // true

हमने पहले बच्चे स्कोप संपत्ति को हटा दिया, फिर जब हम फिर से संपत्ति तक पहुंचने का प्रयास करते हैं, तो प्रोटोटाइप श्रृंखला से परामर्श लिया जाता है।

कोणीय दायरा विरासत

दावेदार:

  • निम्नलिखित नए स्कोप बनाते हैं, और प्रोटोटाइपिक रूप से प्राप्त होते हैं: एनजी-दोहराना, एनजी-शामिल, एनजी-स्विच, एनजी-कंट्रोलर, scope: true साथ निर्देश scope: true , transclude: true साथ transclude: true
  • निम्नलिखित एक नया दायरा बनाता है जो प्रोटोटाइपिक रूप से प्राप्त नहीं होता है: scope: { ... } साथ निर्देश scope: { ... } । यह इसके बजाय एक "अलग" गुंजाइश बनाता है।

नोट, डिफ़ॉल्ट रूप से, निर्देश नए दायरे नहीं बनाते हैं - यानी, डिफ़ॉल्ट scope: false

एनजी-शामिल

मान लीजिए कि हमारे पास हमारे नियंत्रक हैं:

$scope.myPrimitive = 50;
$scope.myObject    = {aNumber: 11};

और हमारे एचटीएमएल में:

<script type="text/ng-template" id="/tpl1.html">
<input ng-model="myPrimitive">
</script>
<div ng-include src="'/tpl1.html'"></div>

<script type="text/ng-template" id="/tpl2.html">
<input ng-model="myObject.aNumber">
</script>
<div ng-include src="'/tpl2.html'"></div>

प्रत्येक एनजी-इन में एक नया बच्चा गुंजाइश उत्पन्न होता है, जो प्रोटोटाइपिक रूप से मूल दायरे से प्राप्त होता है।

टाइपिंग (कहें, "77") पहले इनपुट टेक्स्टबॉक्स में बच्चे के दायरे को एक नया myPrimitive स्कोप प्रॉपर्टी प्राप्त करने का कारण बनता है जो समान नाम की मूल दायरे की संपत्ति को छुपा / छाया करता है। यह शायद वह नहीं है जो आप चाहते हैं / उम्मीद करते हैं।

टाइपिंग (कहें, "99") दूसरे इनपुट टेक्स्टबॉक्स में नतीजतन एक नई बच्ची संपत्ति नहीं होती है। चूंकि tpl2.html मॉडल को किसी ऑब्जेक्ट प्रॉपर्टी से जोड़ता है, इसलिए प्रोटोटाइप विरासत उस समय में जाती है जब ngModel ऑब्जेक्ट myObject के लिए दिखता है - यह इसे मूल दायरे में पाता है।

अगर हम अपने मॉडल को आदिम से किसी ऑब्जेक्ट में बदलना नहीं चाहते हैं, तो हम $ पैरेंट का उपयोग करने के लिए पहले टेम्पलेट को फिर से लिख सकते हैं:

<input ng-model="$parent.myPrimitive">

इस इनपुट टेक्स्टबॉक्स में टाइपिंग (कहें, "22") नतीजतन एक नई बच्ची संपत्ति नहीं है। मॉडल अब मूल दायरे की संपत्ति से जुड़ा हुआ है (क्योंकि $ माता-पिता एक बाल स्कोप संपत्ति है जो माता-पिता के दायरे का संदर्भ देता है)।

सभी क्षेत्रों (प्रोटोटाइप या नहीं) के लिए, कोणीय हमेशा माता-पिता-रिश्ते संबंध (यानी, पदानुक्रम) ट्रैक करता है, स्कोप गुणों के माध्यम से $ माता-पिता, $$ childHead और $$ childTail। मैं आमतौर पर आरेखों में इन स्कोप गुणों को नहीं दिखाता हूं।

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

// in the parent scope
$scope.setMyPrimitive = function(value) {
     $scope.myPrimitive = value;
}

यहां एक नमूना पहेली है जो इस "पैरेंट फ़ंक्शन" दृष्टिकोण का उपयोग करती है। (पहेली को इस उत्तर के हिस्से के रूप में लिखा गया था: https://.com/a/14104318/215945 ।)

https://.com/a/13782671/215945 और https://github.com/angular/angular.js/issues/1267 भी देखें।

एनजी स्विच

एनजी-स्विच स्कोप विरासत एनजी-शामिल की तरह काम करता है। इसलिए यदि आपको माता-पिता के दायरे में एक आदिम के लिए 2-तरफा डेटा बाध्यकारी की आवश्यकता है, तो $ माता-पिता का उपयोग करें, या मॉडल को ऑब्जेक्ट में बदलने के लिए बदलें और उसके बाद उस ऑब्जेक्ट की एक संपत्ति से जुड़ें। यह माता-पिता के दायरे के गुणों के छिपाने / छायांकन से बचने वाले बच्चे के दायरे से बच जाएगा।

एंगुलरजेएस को भी देखें , स्विच-केस के दायरे को बांधें?

एनजी-दोहराने

Ng-repeat थोड़ा अलग काम करता है। मान लीजिए कि हमारे पास हमारे नियंत्रक हैं:

$scope.myArrayOfPrimitives = [ 11, 22 ];
$scope.myArrayOfObjects    = [{num: 101}, {num: 202}]

और हमारे एचटीएमएल में:

<ul><li ng-repeat="num in myArrayOfPrimitives">
       <input ng-model="num">
    </li>
<ul>
<ul><li ng-repeat="obj in myArrayOfObjects">
       <input ng-model="obj.num">
    </li>
<ul>

प्रत्येक आइटम / पुनरावृत्ति के लिए, ng-repeat एक नया दायरा बनाता है, जो प्रोटोटाइपिक रूप से मूल दायरे से प्राप्त होता है, लेकिन यह आइटम के मूल्य को नए बच्चे के दायरे पर एक नई संपत्ति को भी निर्दिष्ट करता है । (नई संपत्ति का नाम लूप वैरिएबल का नाम है।) यह है कि वास्तव में एनजी-दोहराने के लिए कोणीय स्रोत कोड क्या है:

childScope = scope.$new();  // child scope prototypically inherits from parent scope
...
childScope[valueIdent] = value;  // creates a new childScope property

यदि आइटम एक आदिम है (जैसा कि myArrayOfPrimitives में), अनिवार्य रूप से मूल्य की एक प्रति नई बाल स्कोप संपत्ति को सौंपी जाती है। बच्चे के दायरे की संपत्ति के मूल्य को बदलना (यानी, एनजी-मॉडल का उपयोग करना, इसलिए बाल स्कोप num ) पैरेंट स्कोप संदर्भों को सरणी नहीं बदलता है। तो उपरोक्त पहले एनजी-दोहराने में, प्रत्येक बच्चे के दायरे को एक num संपत्ति मिलती है जो myArrayOfPrimitives सरणी से स्वतंत्र है:

यह एनजी-दोहराना काम नहीं करेगा (जैसे आप चाहते हैं / इसकी अपेक्षा करते हैं)। टेक्स्टबॉक्स में टाइप करने से ग्रे बॉक्स में मान बदलते हैं, जो केवल बाल स्कॉप्स में दिखाई देते हैं। हम जो चाहते हैं वह इनपुट के लिए myArrayOfPrimitives सरणी को प्रभावित करने के लिए है, न कि बच्चे के दायरे आदिम संपत्ति। इसे पूरा करने के लिए, हमें मॉडल को ऑब्जेक्ट्स की सरणी बनाने के लिए बदलने की जरूरत है।

इसलिए, यदि आइटम एक वस्तु है, तो मूल वस्तु (प्रतिलिपि नहीं) का संदर्भ नए बच्चे के दायरे की संपत्ति को सौंपा गया है। बच्चे के दायरे की संपत्ति के मूल्य को बदलना (यानी, एनजी-मॉडल का उपयोग करना, इसलिए obj.num ) ऑब्जेक्ट को पैरेंट स्कोप संदर्भ बदलता है। तो ऊपर दूसरे एनजी-दोहराना में, हमारे पास है:

(मैंने सिर्फ एक पंक्ति ग्रे रंगीन किया ताकि यह स्पष्ट हो कि यह कहां जा रहा है।)

यह उम्मीद के रूप में काम करता है। टेक्स्टबॉक्स में टाइप करने से ग्रे बॉक्स में मान बदलते हैं, जो कि बच्चे और अभिभावक दोनों स्कॉप्स के लिए दृश्यमान होते हैं।

एनजी-मॉडल, एनजी-दोहराना, और इनपुट और https://.com/a/13782671/215945 साथ भी कठिनाई देखें

एनजी नियंत्रक

सामान्य प्रोटोटाइप विरासत में एनजी-नियंत्रक परिणामों का उपयोग करते हुए नेस्टिंग नियंत्रक, जैसे एनजी-शामिल और एनजी-स्विच, इसलिए वही तकनीक लागू होती है। हालांकि, "यह दो नियंत्रकों के लिए $ स्कोप विरासत के माध्यम से जानकारी साझा करने के लिए खराब रूप माना जाता है" - http://onehungrymind.com/angularjs-sticky-notes-pt-1-architecture/ एक सेवा का उपयोग डेटा के बीच डेटा साझा करने के लिए किया जाना चाहिए इसके बजाय नियंत्रक।

(यदि आप वास्तव में नियंत्रक स्कोप विरासत के माध्यम से डेटा साझा करना चाहते हैं, तो आपको कुछ भी करने की ज़रूरत नहीं है। बच्चे के दायरे के पास सभी मूल दायरे गुणों तक पहुंच होगी। लोडर या नेविगेट करते समय भी नियंत्रक लोड ऑर्डर अलग होता है )

निर्देशों

  1. डिफ़ॉल्ट ( scope: false ) - निर्देश एक नया दायरा नहीं बनाता है, इसलिए यहां कोई विरासत नहीं है। यह आसान है, लेकिन यह भी खतरनाक है, उदाहरण के लिए, एक निर्देश यह सोच सकता है कि यह दायरे पर एक नई संपत्ति बना रहा है, वास्तव में यह एक मौजूदा संपत्ति को पकड़ रहा है। यह उन निर्देशों को लिखने के लिए एक अच्छा विकल्प नहीं है जो पुन: प्रयोज्य घटकों के रूप में लक्षित हैं।
  2. scope: true - निर्देश एक नया बच्चा गुंजाइश बनाता है जो प्रोटोटाइपिक रूप से मूल दायरे से प्राप्त होता है। यदि एक से अधिक निर्देश (उसी डीओएम तत्व पर) एक नए दायरे का अनुरोध करता है, तो केवल एक नया बच्चा स्कोप बनाया जाता है। चूंकि हमारे पास "सामान्य" प्रोटोटाइप विरासत है, यह एनजी-शामिल और एनजी-स्विच की तरह है, इसलिए माता-पिता के दायरे प्राइमेटिव्स के लिए बाध्यकारी 2-तरफा डेटा से सावधान रहें, और बाल दायरे के गुणों के बच्चे के दायरे को छिपाने / छायांकन से सावधान रहें।
  3. scope: { ... } - निर्देश एक नया अलग / पृथक गुंजाइश बनाता है। यह प्रोटोटाइपिक रूप से वारिस नहीं करता है। पुन: प्रयोज्य घटकों को बनाते समय यह आमतौर पर आपकी सबसे अच्छी पसंद होती है, क्योंकि निर्देश माता-पिता के दायरे को गलती से पढ़ या संशोधित नहीं कर सकता है। हालांकि, इस तरह के निर्देशों को अक्सर कुछ माता-पिता के दायरे के गुणों तक पहुंच की आवश्यकता होती है। ऑब्जेक्ट हैश का उपयोग दो-तरफा बाध्यकारी ('=' का उपयोग करके) या एक तरफा बाध्यकारी ('@' का उपयोग करके) अभिभावक दायरे और अलग-अलग दायरे के बीच करने के लिए किया जाता है। अभिभावक स्कोप अभिव्यक्तियों से जुड़ने के लिए '&' भी है। इसलिए, ये सभी स्थानीय दायरे गुण बनाते हैं जो मूल दायरे से प्राप्त होते हैं। ध्यान दें कि बाध्यकारी सेट अप करने में सहायता के लिए विशेषताओं का उपयोग किया जाता है - आप ऑब्जेक्ट हैश में केवल पैरेंट स्कोप प्रॉपर्टी नामों का संदर्भ नहीं दे सकते हैं, आपको एक विशेषता का उपयोग करना होगा। उदाहरण के लिए, यदि आप अलग-अलग दायरे में मूल संपत्ति पेरेंट से parentProp चाहते हैं तो यह काम नहीं करेगा: <div my-directive> और scope: { localProp: '@parentProp' } । प्रत्येक विशेषता संपत्ति को निर्दिष्ट करने के लिए एक विशेषता का उपयोग किया जाना चाहिए, जिस पर निर्देश बाध्य करना चाहता है: <div my-directive the-Parent-Prop=parentProp> और scope: { localProp: '@theParentProp' }
    गुंजाइश __proto__ संदर्भ ऑब्जेक्ट अलग करें। दायरे के $ माता-पिता को अभिभावक के दायरे को अलग करें, इसलिए यह अलग है और माता-पिता के दायरे से प्रोटोटाइपिक रूप से प्राप्त नहीं होता है, यह अभी भी एक बाल दायरा है।
    नीचे दी गई तस्वीर के लिए हमारे पास है
    <my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2"> और
    scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
    साथ ही, मान लें कि यह निर्देश इसके लिंकिंग फ़ंक्शन में करता है: scope.someIsolateProp = "I'm isolated"

    अलग-अलग क्षेत्रों पर अधिक जानकारी के लिए http://onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope/
  4. transclude: true - निर्देश एक नया "स्थानांतरित" बाल क्षेत्र बनाता है, जो प्रोटोटाइपिक रूप से मूल दायरे से प्राप्त होता है। बहिष्कृत और पृथक गुंजाइश (यदि कोई है) भाई बहन हैं - प्रत्येक गुंजाइश की $ मूल संपत्ति समान माता-पिता का संदर्भ देती है। जब एक स्थानांतरित और एक अलग क्षेत्र दोनों मौजूद होते हैं, तो स्कोप प्रॉपर्टी $$ को अलग करें सिब्लिंग स्थानांतरित गुंजाइश का संदर्भ देगा। मुझे स्थानांतरित गुंजाइश के साथ किसी भी तरह की बारीकियों के बारे में पता नहीं है।
    नीचे दी गई तस्वीर के लिए, उपर्युक्त के रूप में उपरोक्त के समान निर्देश transclude: true

इस showScope() में एक showScope() फ़ंक्शन है जिसका उपयोग एक अलग और स्थानांतरित स्कोप की जांच के लिए किया जा सकता है। पहेली में टिप्पणियों में निर्देश देखें।

सारांश

चार प्रकार के स्कोप हैं:

  1. सामान्य प्रोटोटाइप स्कोप विरासत - एनजी-शामिल, एनजी-स्विच, एनजी-नियंत्रक, scope: true साथ निर्देश scope: true
  2. प्रतिलिपि / असाइनमेंट के साथ सामान्य प्रोटोटाइप स्कोप विरासत - एनजी-दोहराना। एनजी-दोहराने का प्रत्येक पुनरावृत्ति एक नया बच्चा गुंजाइश बनाता है, और उस नए बच्चे के दायरे को हमेशा एक नई संपत्ति मिलती है।
  3. गुंजाइश के साथ निर्देश - दायरे के साथ निर्देश scope: {...} । यह प्रोटोटाइप नहीं है, लेकिन '=', '@', और '&' गुणों के माध्यम से अभिभावक स्कोप गुणों तक पहुंचने के लिए एक तंत्र प्रदान करता है।
  4. स्थानांतरित गुंजाइश - transclude: true साथ transclude: true । यह भी एक सामान्य प्रोटोटाइप स्कोप विरासत है, लेकिन यह किसी भी अलग दायरे का एक भाई है।

सभी क्षेत्रों (प्रोटोटाइप या नहीं) के लिए, कोणीय हमेशा माता-पिता-बच्चे संबंध (यानी, पदानुक्रम) ट्रैक करता है, गुण $ माता-पिता और $$ बच्चे के माध्यम से $ और $ बच्चे बच्चे।

graphviz "* .dot" फ़ाइलों के साथ चित्र उत्पन्न किए गए थे, जो कि github पर हैं। टिम कैसवेल की " ऑब्जेक्ट ग्राफ के साथ सीखना जावास्क्रिप्ट " चित्रों के लिए ग्राफ़विज़ का उपयोग करने की प्रेरणा थी।





angularjs pdf datatables angular-datatables