角色自定义验证在SharePoint托管应用程序中不起作用

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树时，我可以看到我的“form name ='calcform'”已被SharePoint删除