Angular ngModel 不会触发 Kendo 更改事件答案

【问题标题】：Angular ngModel doesn't fire Kendo change eventAngular ngModel 不会触发 Kendo 更改事件
【发布时间】：2016-08-16 05:54:00
【问题描述】：

我有一个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 “更改”事件。我的真实应用有几十个这样的模型，那么有没有办法自动修复这个问题？？？

谢谢。

【问题讨论】：

标签： javascript jquery angularjs kendo-ui telerik

【解决方案1】：

你可以写一个指令来替换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);
                    });


                }
            }
        }]);

【讨论】：