2016-08-16 9 views
0

У меня есть пример Kendo model (person для этого примера) и смотрите, как он изменен или нет, используя dirty.Угловая ngМодель не срабатывает событие изменения Kendo

<!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 не изменится, потому что Угловая ngModel не срабатывают Кендо «изменить» событие. У моего настоящего приложения есть десятки таких моделей, как есть, так есть ли способ исправить это автоматически ???

Спасибо.

ответ

1

Вы можете написать директиву, чтобы заменить на нг-модели,

<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); 
        }); 


       } 
      } 
     }]);