Angularize SharePoint客户端分类选项

Question

模式和实践团队在与SharePoint集成时发布了一个客户端分类选项。它运行良好，但是使用jQuery，我的SharePoint应用程序建立在Angular上……这似乎是一种增长的趋势。我想利用Angular的客户端分类选项，并且不确定如何最好地实现这一目标。这是一个组件的链接：https：//github.com/officedev/pnp/tree/dev/components/core.taxonomypicker

我认为这将是指令，或者有非指导性的替代方式（又称角，角度如何管理替换/初始化）：

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

给定制作"响应"托管元数据字段的挑战，我使用JavaScript对象模型来检索术语，然后将它们推入数组中。这包括检索同义词。

// 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();