1

我已经在共享点托管应用程序中编写了这段代码

<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 删除

在此处输入图像描述

4

0 回答 0