javascript - Angular ngModel 不会触发 Kendo 更改事件

标签 javascript jquery angularjs kendo-ui telerik

我有一个Kendo model实例(本例中为 person),并使用 dirty 属性观察它是否被修改。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Kendo + Angular</title>

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css">

    <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.2.714/js/angular.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="MainCtrl">
    <div>Person name: {{ person.name }}</div>
    <input type="text" name="name" ng-model="person.name"> <!-- This input don't work -->
    <button ng-click="foo()">Foo</button> <!-- This button work because I call person.set method manually -->
    <div>This person is modified? {{ person.dirty }}</div>
</div>
<script>
    var Person = kendo.data.Model.define({
        id: "personId", // the identifier of the model
        fields: {
            "name": {
                type: "string"
            },
            "age": {
                type: "number"
            }
        }
    });

    angular.module("app", ["kendo.directives"])
            .controller("MainCtrl", function ($scope) {
                $scope.person = new Person({
                    name: "John Doe",
                    age: 42
                });
                $scope.foo = function () {
                    $scope.person.set('name', "Kendo");
                }
            });
</script>
</body>
</html>

但是当我在文本框中输入内容时,dirty 不会改变,因为 Angular ngModel 不会触发 Kendo“更改”事件。我的真实应用程序有几十个这样的模型,那么有什么方法可以自动修复这个问题???

谢谢。

最佳答案

您可以编写指令来替换 ng-model,

<input type="text" name="name" k-bind-model="person.name">



angular.module('app')
    .directive("kBindModel", ["$parse", function ($parse) {
            return {
                restrict: "A",
                scope: false,
                link: function (scope, element, attributes, controller) {


                    var key = null;
                    var strs = attributes.kBindModel.split('.');
                    if (strs && strs.length > 1) {
                        key = strs[1];
                    }

                    var     model = scope[strs[0]];

                    element.change(function () {
                        scope.$apply(function () {
                            model.set(key, element.val());
                        });
                    });

                    scope.$watch(attributes.kBindModel, function (n, o) {
                        element.val(n);
                    });


                }
            }
        }]);

关于javascript - Angular ngModel 不会触发 Kendo 更改事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38967489/

相关文章:

javascript - 表单验证 : un-hide submit button when a radio value is selected and text message is entered

javascript - 使用 Jquery 获取 JSON 属性

javascript - 对于in,如何限制输出?

javascript - 一页上有2个相似的表单,$(this).find();正在从最后一个表单中获取值(value)

javascript - 使用 Node.js 将 HTML 存储在 browserDB 中

javascript - ReactJS 通过 onClick 函数传递 key

jquery - 在perl cgi脚本中迭代动态数组

javascript - 如何强制 jQuery UI 对话框再次重绘或触发某些内容强制调整大小

javascript - 在所有页面中维护 session 信息不起作用

angularjs - 在 Heroku 上部署 MEAN 应用程序时出现应用程序错误