Expecting newline or semicolon error in AngularJS HTML Template

创建于 2017年08月04日 14:20

may be related to https://youtrack.jetbrains.com/issue/WEB-28028... Please can you check if the problem persists in 2017.2.2 EAP when it becomes available?

Grid Trekkor

创建于 2017年08月16日 18:28

Still having this issue on 2017.2.2 (172.3757.55)

Oksana Chumak

创建于 2017年08月18日 11:51

Could you please provide a complete code sample so that we could reproduce the issue?

Stuart Sa

创建于 2017年10月16日 16:04

Excuse me, but this issue has NOTHING to do with XSLT.

What files are getting this error? This file, for one, entitled "enrollment.html."

And where is it getting it? The "class" and "style" attributes. STANDARD HTML ATTRIBUTES.

Why is it getting it? The AngularJS plugin is expecting an AngularJS expression on these attributes. Wrong. Attributes named simply "class" and "style" are NEVER designed to accept AngularJS expressions. Even if the directive is a custom element, "class" and "style" attributes without prefixes (e.g., "class" as opposed to "ng-class", "style" as opposed to "ng-style") will ALWAYS be expected to have the same syntax that they do in HTML global attributes.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HDC Early Learning Center Enrollment Packet</title>
    <script src="../bower_components/jquery/dist/jquery.min.js"></script>
    <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css"/>
    <style>
        @media screen {
            .page {
                max-height: 10in;
            }
        }
        @media print {
            @page {
                @top-center {
                    content: "LSUHSC Human Development Center <br />Early Learning Center <br />Enrollment Packet"
                }
                @top-right {
                    content: "Page " counter(page) " of " counter(pages);
                }
            }
            .new-page {
                page-break-before: always;
                break-before: page;
            }
                .page {
                    page-break-before: always;
                    break-before: page;
                    width: 7.5in;
                    height: 10in;
                    margin: 0;
                }
        }


        .bi {
            font-weight: bold;
            font-style: italic;
        }
    </style>

</head>
<body>
<div id="app">
    <form class="form" id="elcEnrollment">

        <h1 style="text-align: center;">LSUHSC Human Development Center<br />
            Early Learning Center<br />
            Enrollment Packet</h1>
        <p>Please ensure that all enrollment forms in this packet are completed and signed where indicated. <span class="bi">Please note that enrollment is not complete until ALL forms, fees, and documents have been received by the ELC office.</span>
        "Optional" does not mean that a form can be left out; it means that there is an option on the form to deny your child the requested permission.</p>
        <!--<b-form-checkbox-group plain id="forms" v-model="completedItems" stacked>
            <b-form-checkbox v-for="form in formsChecklist" :key="form.value" :value="form.value">
                {{form.value}}<template v-if="form.optional"> (Optional)</template>
            </b-form-checkbox>
        </b-form-checkbox-group>
        <template v-if="docsChecklist.length">
            <p>Also, please include copies of the following documents:</p>
            <b-form-checkbox-group plain id="doc" v-model="completedItems" stacked>
                <b-form-checkbox v-for="doc in docsChecklist" :key="doc.value" :value="doc.value">
                    {{doc.value}}
                </b-form-checkbox>
            </b-form-checkbox-group>
        </template>-->
        <div class="page">
            <div style="height: -moz-fit-content; height: -webkit-fit-content; height: fit-content;">h1>Family Enrollment Form</h1>
                <div class="form-group">
                    <label for="admissionDate">Admission Date</label>
                    <input id="admissionDate" type="date" class="form-control" />
                </div>
                <h2>Your Child's Picture</h2>
                <p>Your child's image will appear on this page if you choose to attach one to this form electronically via the button below. If not, you can attach a photo to the packet before this page when you submit your application.</p>
                <div class="form-group d-print-none">
                    <label for="img">Image Upload (accepts gif, jpg, tif, png image files)</label>
                    <input class="form-control" type="file" accept=".gif,.jpg,.tif,.png" id="img" onchange="changeImage()"/>
                </div></div>
            <img :src="img" v-if="img" />

        </div>
        <div class="container-fluid new-page">
            <div class="row">
                <div class="col-12 bi">
                    Please Print Clearly (*required field)
                </div>
            </div>
            <!--<template v-for="parent, index in parents" v-if="index == 0 || !parents[0].single">
                <div class="row">
                    <div class="col-12" style="font-weight: bold">
                        <div class="form-check form-check-inline"><label class="form-check-label">Parent/Guardian #{{index + 1}} Information: </label></div>
                        <div class="form-check form-check-inline" v-for="gender in parentGenders"><input class="form-check-input" type="radio" v-model="parent.gender"/><label class="form-check-label"> {{gender}}</label></div>
                        <div class="form-check form-check-inline" v-if="index == 0"><input class="form-check-input" type="checkbox" v-model="parent.single"><label class="form-check-label"> Single Parent</label></div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="col-5 form-group">
                        <label :for="'parent_' + index + '_fname'">*First Name</label>
                        <input :id="'parent_' + index + '_fname'" v-model="parent.fname" type="text" class="form-control form-control-sm" required />
                    </div>
                    <div class="col-2 form-group">
                        <label :for="'parent_' + index + '_mi'">MI</label>
                        <input :id="'parent_' + index + '_mi'" v-model="parent.mi" type="text" class="form-control form-control-sm" />
                    </div>
                    <div class="col-5 form-group">
                        <label :for="'parent_' + index + '_lname'" required type="text">Last Name</label>
                        <input :id="'parent_' + index + '_mi'" v-model="parent.lname" type="text" class="form-control form-control-sm" />
                    </div>
                </div>
                <div class="form-row">
                    <div class="col-12 form-group">
                        <label :for="'parent_' + index + '_home_address'">*Home Address</label>
                        <input type="text" :id="'parent_' + index + '_home_address'" v-model="parent.homeAddress" class="form-control form-control-sm" />
                    </div>
                </div>
                <div class="form-row">
                    <div class="col-6 form-group">
                        <label :for="'parent_' + index + '_job_title'">*Occupation or Job Title</label>
                        <input type="text" :id="'parent_' + index + '_job_title'" v-model="parent.jobTitle" class="form-control form-control-sm" />
                    </div>
                    <fieldset class="col-6">
                        <div class="form-check form-check-inline" v-for="employeeType in employeeTypes" v-if="!(index === 0 && employeeType === 'Not an LSUHSC Employee')">
                            <label class="form-check-label"><input class="form-check-input" v-model="parent.facStaff" :value="employeeType" type="radio" /> {{employeeType}}</label>
                        </div>
                    </fieldset>
                </div>
            </template>-->
        </div>


    </form>



</div>
<script>
   function changeImage(elem) {
        console.dir(elem);
        if (elem.files.length !== 1) {
            data.img = null;
         } else {
            data.img = URL.createObjectURL(elem.files[0]);
        }
    }
    var data = {
       parentGenders: [
           "Mother",
           "Father"
       ],
        employeeTypes: [
            "Faculty",
            "Staff",
            "Not an LSUHSC Employee"
        ],
        img: null,
        completedItems: [],
        formsChecklist: [
            {value: "Family Registration Form (attach child photo)", optional: false},
            {value: "Enrollment Agreement", optional: false},
            {value: "Emergency Plan", optional: false},
            {value: "Medication Administration Policy", optional: false},
            {value: "Consent to Photograph", optional: false},
            {value: "Parental Authorization for Medication", optional: true},
            {value: "Permission to Apply Topical Ointments, Sunscreen", optional: true},
            {value: "Permission for Water Play", optional: true}
        ],
        docsChecklist: [
            {value: "Copy of Parent's/Parents' Driver's License(s) or LA Identification", optional: false},
            {value: "Current Immunization Record", optional: false}
        ],
        parents: [
            {
                gender: "Mother",
                single: false,
                fname: "",
                mi: "",
                lname: "",
                homeAddress: "",
                jobTitle: "",
                facStaff: "Faculty",
                lsuhscDept: {
                    predefined: [],
                    other: ""
                },
                cellPhone: "",
                officePhone: "",
                workAddress: "",
                workHours: "",
                homePhone: "",
                email: "",
                driversLicense: {
                    state: "",
                    number: ""
                },
                maritalStatus: "Married",
                custodial: false
            },{
                gender: "Mother",
                fname: "",
                mi: "",
                lname: "",
                homeAddress: "",
                jobTitle: "",
                facStaff: "Not an LSUHSC Employee",
                lsuhscDept: {
                    predefined: [],
                    other: ""
                },
                cellPhone: "",
                officePhone: "",
                workAddress: "",
                workHours: "",
                homePhone: "",
                email: "",
                driversLicense: {
                    state: "",
                    number: ""
                },
                maritalStatus: "Married",
                custodial: false
            }
        ]
    };
    var vm = new Vue({
        data: data,
        el: "#app",
        methods: {
            print: function() {
                window.print();
            }
        }
    });
    function printer(evt) {
        evt.preventDefault();
        print();
    }
    var elcEnrollment = document.getElementBydId("elcEnrollment");
    if (elcEnrollment.addEventListener) {
        elcEnrollment.addEventListener("submit", printer);
    } else if (elcEnrollment.attachEvent) {
        elcEnrollment.attachEvent("onsubmit", printer);
    }
    function changeImage() {
        var imageFile = document.getElementById("img").files[0]
        if ( imageFile) {
          var reader = new FileReader();
          reader.onload = function() {
              data.img = reader.result;
          }
          reader.readAsDataURL(imageFile);
        }
    }
</script>
</body>
</html>

Two pictures are attached to show that loading the AngularJS plugin is directly responsible for the errors.

Normal:

With Angular plugin enabled:

.

Elena Pogorelova

创建于 2017年10月16日 16:40

>Excuse me, but this issue has NOTHING to do with XSLT.

exactly, https://youtrack.jetbrains.com/issue/WEB-28028 is not about XSLT:)

Anyway, it's fixed in 2017.2.2, so your issue is likely different. please attach a screenshot of Settings | Editor | Language Injections page

Nathan

创建于 2018年10月17日 08:43

Has this issue been solved? Because I still have it with latest build:

Elena Pogorelova

创建于 2018年10月17日 11:17

Looks like your issue is different - you have Angular injected in a value of Angular component(?) attribute, not in class or style attributes... Please can you provide af-form-group definition (as a code snippet/file)?

The other issue (errors in ng-options value) is tracked as https://youtrack.jetbrains.com/issue/WEB-28294

Nathan

创建于 2018年10月17日 14:11

angular.module('af.angular')
  .component('afFormGroup', {
    bindings: {
      formLabel: '@?',
      formClass:'<?',
      formHelp:'@?',
      required:'@?'
    },
    transclude: true,
    template:
      '<div class="af-form-group form-group" ng-class="$ctrl.formClass"> ' +
        '<label class="control-label posRel" ng-if="::$ctrl.formLabel">' +
          '<span ng-bind-html="::$ctrl.formLabel" class="text-muted"></span> ' +
          '<strong ng-show="$ctrl.showRequired" class="text-danger required">*</strong>' +
        '</label> ' +
        '<div ng-transclude></div> ' +
        '<p class="help-block" ng-if="::$ctrl.formHelp" ng-bind-html="::$ctrl.formHelp"></p> ' +
      '</div>',
    controller: function($attrs) {
      var ctrl = this;
      ctrl.$onInit = function(){
        ctrl.showRequired = ctrl.required === 'true' || ctrl.required === true;
      };
    }
  });

Elena Pogorelova

创建于 2018年10月17日 14:44

Thanks! It's a known issue also, please follow https://youtrack.jetbrains.com/issue/WEB-29774 for updates