带有数字输入的 Umbraco 自定义数据类型未显示值答案

【问题标题】：Umbraco Custom DataType with number input not showing value带有数字输入的 Umbraco 自定义数据类型未显示值
【发布时间】：2016-11-28 07:09:10
【问题描述】：

我在 Umbraco 7.4.3 中有一个自定义数据类型，它有一个类型为 number 的简单输入。这使用 ng-bind 属性绑定到模型，但文本框不呈现该值。

NumberTestInput.Editor.html

<div ng-controller="NumberTestInput.NumberTestInputController">
    <!--Changing the type to 'text' causes the value to render correctly-->
    <!--Otherwise, it renders with an empty value-->
    <input type="number" ng-model="model.value" />
</div>

NumberTestInput.Controller.js

angular.module("umbraco").controller("NumberTestInput.NumberTestInputController", function ($scope) {

    //Causes value to load on page load, but textbox is blanked out again after publishing
    //$scope.model.value = parseInt($scope.model.value);

});

package.manifest

{
  "propertyEditors": [
    {
      "name": "Number Test Input",
      "alias": "numberTestInput",
      "editor": {
        "hideLabel": false,
        "isReadOnly": false,
        "valueType": "INT",
        "view": "~/App_Plugins/NumberTestInput/NumberTestInput.Editor.html"
      }
    }
  ],
  "javascript": [
    "~/App_Plugins/NumberTestInput/NumberTestInput.Controller.js"
  ]
}

看起来模型值类型设置为字符串而不是数字的问题，尽管我在清单中将此设置为 INT，并且在输入时正确保存了值。只是它们没有在 UI 中正确呈现。我需要做些不同的事情才能让它发挥作用吗？

【问题讨论】：

model.value 的实际值是多少？
@developer033 这是一个数值。值本身被正确存储，通过将文本框类型从“数字”更改为“文本”来证明。

标签： angularjs binding model umbraco

【解决方案1】：

找到了解决此问题的方法，方法是创建一个新属性来包装 model.value 并强制它返回一个整数。

添加到控制器

Object.defineProperty(
    $scope,
    "modelValue",
    {
        get: function() { return parseInt($scope.model.value); },
        set: function(newValue) { $scope.model.value = newValue; }
    });

查看

<input type="number" ng-model="modelValue" />

数字输入字段现在绑定到新的 modelValue 属性，该属性将 model.value 的值作为整数返回。

不过，这确实有点像 hack，希望有更好的方法来做到这一点，让 Umbraco 可以自动设置正确的类型。

【讨论】：