CODEWITHSUNDEEP
javascriptjqueryangularjskendo-uitelerik
dungdm93
dungdm93

Reputation: 117

Angular ngModel doesn't fire Kendo change event

I have a Kendo model instance (person for this example) and watching it is modified or not by using dirty property.

<!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>

But when I type to text box dirty don't change because Angular ngModel doesn't fire Kendo "change" event. My real app have dozens of models like this, so is there any way to fix this automatically???

Thanks.

Upvotes: 0

Views: 401

Answers (1)

Cuong Nguyen
Cuong Nguyen

Reputation: 11

You can write a directive to replace for 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);
                    });


                }
            }
        }]);

Upvotes: 1

Related Questions