Angularize SharePoint 客户端分类选择器

Angularize SharePoint Client Side Taxonomy Picker

模式和实践团队发布了一个客户端分类选择器,供与 SharePoint 集成时使用。它运行良好,但使用 jQuery 并且我的 SharePoint 应用程序内置于 Angular... 这似乎是一种增长趋势。我想利用 Angular 中的客户端分类选择器,但不确定如何最好地实现这一点。这是组件的 link:https://github.com/OfficeDev/PnP/tree/dev/Components/Core.TaxonomyPicker

我认为这将是一个指令,或者是否有一种非指令的方式来替换(又名,Angular 如何管理 replace/initialization),就像他们在这里所做的那样:

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 团队提供的示例中所示的脚本加载组件,因为我已经将这些组件嵌入到我的应用程序中。

鉴于制作 "responsive" 托管元数据字段的挑战,我使用 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();