angularjs - Angular Custom Validation が SharePoint Hosted App で機能しない

Question

このコードは、SharePoint でホストされているアプリ内に記述しました

<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
    <div ng-app="MyApp">
        <div ng-controller="MyController">
            <p>{{webtitle}}</p>
              <form name="calcform">
                <p>{{calcform.item1.$error}}</p>
                <p>{{calcform.item1.$error}}</p>
                <span ng-show="calcform.item1.$error.numbersonly">item1 must be a number</span>
                <span ng-show="calcform.item2.$error.numbersonly">item2 must be a number</span>
                <input name="item1" ng-model="model.item1" numbersonly />            
                <input name="item2" ng-model="model.item2" numbersonly />
                <input ng-click="add()" type="button" value="+" ng-disabled="calcform.$invalid"/>
                <input ng-click="subtract()" type="button" value="-" ng-disabled="calcform.$invalid" />
                <input ng-click="multiply()" type="button" value="*" ng-disabled="calcform.$invalid"/>
                <input ng-click="divide()" type="button" value="/" ng-disabled="calcform.$invalid"/>                    
              </form>
              <p><font size="14">{{model.result}}</font></p>
        </div>
    </div>
</asp:Content>

ここでは、カスタム ディレクティブを使用して、ユーザーが入力フィールドに数字のみを入力していることを確認しています。

私のディレクティブは次のように実装されています

app.directive('numbersonly', function () {
    return {
        require: 'ngModel',
        link: function (scope, elem, attr, ctrl) {
            console.log('came inside directive');

            ctrl.$parsers.unshift(function (value) {
                var isNan = isNaN(value);
                ctrl.$setValidity('numbersonly', !isNan);
                console.log(ctrl);
                return (!isNan) ? value : undefined;
            });

            ctrl.$formatters.unshift(function (value) {
                var isNan = isNaN(value);
                ctrl.$setValidity('numbersonly', !isNan);
                return value;
            });
        }
    };
});

私のデバッグ コンソール ログ ステートメントでは、入力フィールドに入力された内容に応じて、毎回 ctrl オブジェクトが完全に設定されていることがわかります。

しかし

<span ng-show="calcform.item1.$error.numbersonly">item1 must be a number</span>

また

<p>{{calcform.item1.$error}}</p>

何も表示しません。

上記のコードをコピーして index.html と app.html に貼り付け、ブラウザでページを表示すると、すべて正常に動作し、すべてのオブジェクトが表示されます。

しかし、SharePoint 2013 内では、どういうわけか、ディレクティブが値を設定するスコープが失われ、$error オブジェクトがまったく表示されないため、ng-show は常に false と評価されます。

問題をより複雑にするために。Chrome で DOM ツリーを見ると、「フォーム名='calcform'」が SharePoint によって削除されていることがわかります。