2016-08-16 22 views
0

プロパティを使用して、私はKendo modelインスタンス(この例ではperson)を持っていて、それが変更されているかどうかを監視しています。角度ngModelが剣道変更イベントを発生させない

<!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は剣道「変更」イベントを発生しないので、変更しないでください。私の実際のアプリにはこのようなモデルが何十もあるので、これを自動的に修正する方法はありますか?

ありがとうございました。

あなたはNG-モデルに置き換えるためにディレクティブを書くことができます

答えて

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


       } 
      } 
     }]); 
関連する問題