Angularize SharePoint客戶端分類選擇器

Question

模式和實踐團隊發佈了客戶端分類選擇器，以便與SharePoint集成時使用。它運行良好，但使用jQuery和我的SharePoint應用程序內置Angular ...這似乎是一個增長的趨勢。我想利用Angular中的客戶端分類選擇器，並不確定如何最好地實現這一點。這裏是一個鏈接到組件：https://github.com/OfficeDev/PnP/tree/dev/Components/Core.TaxonomyPicker

我在想這是一個指令，或者是否有非指令性方式來取代（也就是說，Angular如何管理替換/初始化），因爲他們在這裏執行：

HTML：

<input type="hidden" id="taxPickerGeography" /> 

jQuery函數獲取當前語境下，並創建分類選取器

$(document).ready(function() { 
    var context; 

    context = SP.ClientContext.get_current(); 

    $('#taxPickerGeography').taxpicker({ 
     isMulti: false, 
     allowFillIn: false, 
     termSetId: '89206cf2-bfe9-4613-9575-2ff5444d1999' 
    }, context); 
}); 

我不需要腳本加載組件，如由PnP團隊提供的示例中所示，因爲我已將這些組件嵌入到我的應用程序中。

Answer 1

考慮到製作一個「響應式」Managed Metadata字段的挑戰，我使用JavaScript Object Model建立了以下檢索條件，然後將它們推送到Array中使用。這包括檢索同義詞。

// Query Term Store and get terms for use in Managed Metadata picker stored in an array named "termsArray". 

var termsArray = []; 

    function execOperation() { 

     // Current Context 
     var context = SP.ClientContext.get_current(); 
     // Current Taxonomy Session 
     var taxSession = SP.Taxonomy.TaxonomySession.getTaxonomySession(context); 
     // Term Stores 
     var termStores = taxSession.get_termStores(); 
     // Name of the Term Store from which to get the Terms. Note, that if you receive the following error "Specified argument was out of the range of valid values. Parameter name: index", you may need to check the term store name under Term Store Management to ensure it was not changed by Microsoft 
     var termStore = termStores.getByName("TermStoreName"); 
     // GUID of Term Set from which to get the Terms 
     var termSet = termStore.getTermSet("TermSetGUIDHere"); 
     var terms = termSet.getAllTerms(); 
     context.load(terms); 
     context.executeQueryAsync(function() { 

      var termEnumerator = terms.getEnumerator(); 
      while (termEnumerator.moveNext()) { 
       var currentTerm = termEnumerator.get_current(); 
       var guid = currentTerm.get_id(); 
       var guidString = guid.toString(); 
       var termLabel = currentTerm.get_name(); 

       // Get labels (synonyms) for each term and push values to array 
       getLabels(guid, guidString, termLabel); 
      } 

      // Set $scope to terms array 
      $scope.$apply(function() { 
       $scope.termsArray = termsArray; 
      }); 

     }, function (sender, args) { 
      console.log(args.get_message()); 
     }); 

     // Get labels (synonyms) for each term and push values to array 
     function getLabels(termguid, guidString, termLabel) { 
      var clientContext = SP.ClientContext.get_current(); 
      var taxSession = SP.Taxonomy.TaxonomySession.getTaxonomySession(clientContext); 
      var termStores = taxSession.get_termStores(); 
      // The name of the term store. Note, that if you receive the following error "Specified argument was out of the range of valid values. Parameter name: index", you may need to check the term store name under Term Store Management to ensure it was not changed by Microsoft 
      var termStore = termStores.getByName("TermStoreName"); 
      // GUID of Term Set from which to get the Terms 
      var termSet = termStore.getTermSet("TermSetGUIDHere"); 
      var term = termSet.getTerm(termguid); 
      var labelColl = term.getAllLabels(1033); 

      clientContext.load(labelColl); 
      clientContext.executeQueryAsync(function() { 
       var labelEnumerator = labelColl.getEnumerator(); 
       var synonyms = ""; 
       while (labelEnumerator.moveNext()) { 
        var label = labelEnumerator.get_current(); 
        var value = label.get_value(); 
        synonyms += value + " | "; 
       } 
       termsArray.push({ 
        termName: termLabel, 
        termGUID: guidString, 
        termSynonyms: synonyms 
       }); 

      }, function (sender, args) { 
       console.log(args.get_message()); 
      }); 
     } 
    }; 

    // Execute function 
    execOperation();