如何将角度指令绑定到剑道 ui 模型答案

【问题标题】：How to bind angular directive to kendo ui model如何将角度指令绑定到剑道 ui 模型
【发布时间】：2017-05-23 19:11:51
【问题描述】：

我搜索了很多，并没有在网上找到类似的问题和解决方案，但是我的头撞墙太久了......

我想通过角度模型/对象传递给指令，这样当它返回一个新元素时，它就会绑定到旧模型/对象... 目前它正在返回值我试图让代码尽可能简单直接...

希望这是有道理的：

指令：

(function () {
    angular.module('myMod').directive('myDir', ['$compile',
        function ($compile) {
            return {
                restrict: 'E',
                replace: true,
                scope: {
                    type: '@',
                    val: '@'
                },
                link: function (scope, element, attrs) {                
                    var newEl;                   
                    switch (scope.type) {
                        case "1":
                            newEl = '<input type="text" class="k-textbox" k-ng-model="{{val}}"  />';
                            break;
                        case "2":
                            newEl = '<input kendo-date-picker k-ng-model="{{val}}" />';
                            break;
                    }
                    element.replaceWith($compile(newEl)(scope));

                }
            };
        }
    ]);
})();

HTML：

<div class="row" ng-repeat="item in vm.model.things">
    <div class="form-group">
        <div class="col-sm-6">
            <label class="control-label">{{item.name}}</label>
        </div>
        <div class="col-sm-6">
            <my-dir type="{{item.type}}" value="{{item.val}}" ></my-dir>
        </div>
    </div>
</div>

当我检查元素时，我可以看到它正在返回值：“这是一个文本框”，我确定我很接近，但我想“绑定”而不是值/文本指令的模型/对象：

<input type="text" class="k-textbox ng-scope" k-ng-model="This is a textbox text">

如果您了解我要达到的目标，请随时编辑问题，这有助于对其他人更有意义... 谢谢！

【问题讨论】：

标签： angularjs kendo-ui

【解决方案1】：

您不应该在那里使用插值指令，它会在value 属性中添加评估值，而是直接使用val，以便k-ng-model 将保持对val $scope 值引用的引用

switch (scope.type) {
    case "1":
        newEl = '<input type="text" class="k-textbox" k-ng-model="val"  />';
        break;
    case "2":
        newEl = '<input kendo-date-picker k-ng-model="val" />';
        break;
}

【讨论】：