angularjs - 使用 k-template 选项和 href 链接呈现 Angular-Kendo Treeview 的最佳方法

Question

我正在尝试使用 href 链接连接 Kendo Treeview 。

Treeview 有一个 href 链接 与每个树项相关联，但是我仍然需要修改它以仅在它是叶节点时呈现 href。

我的 主要问题 现在正在尝试正确呈现模板对象以读取我的 reptName 字段，如下所示:

  vm.treeItemTemplate = "<a href='\?reptname='{{dataItem.reptName}}'> {{dataItem.text}} </a>";

无论我在 ?reptname= 中输入什么，它都不起作用。

即使对参数进行硬编码也不起作用，如:

  vm.treeItemTemplate = "<a href='\?reptname='test'> {{dataItem.text}} </a>";

树项的链接只是呈现为“://.../index.html?reptname=”

最终，我尝试使用下面数据源中的 reptName 字段。这将是我传入的参数。

这是返回到 Treeview 的 k-data-source 的 Json 数据:

    var reportsJson = [
           {
               id: 1, text: "MR Reports", expanded: false, spriteCssClass: "rootfolder", checkChildren: true, items: [
               {
                   id: 2, text: "VaR", spriteCssClass: "folder", items: [
                       { id: 3, text: "VaR 97", reptName: "VaR 97" },
                       { id: 4, text: "VaR 98", reptName: "VaR 98" },
                       { id: 4, text: "VaR 99", reptName: "VaR 99" }
                   ]
               },
               {
                   id: 5, text: "Stressed VaR", spriteCssClass: "folder", items: [
                       { id: 6, text: "Rept1", reptName: "Rept1" },
                       { id: 7, text: "Rept2", reptName: "Rept2" },
                       { id: 8, text: "Rept3", reptName: "Rept3" }
                   ]
               }                   
               ]
           }
        ];

我的 sidebar.html 代码:

<div data-cc-sidebar data-ng-controller="sidebar as vm">
<div class="sidebar-filler"></div>
<div class="sidebar-dropdown"><a href="#">Menu</a></div>
<div class="sidebar-inner">
    <div class="sidebar-widget">
    </div>

    <ul class="navi">  <!-- pulls from vm.routes to render left nav menu -->
         <li class="nlightblue fade-selection-animation" ng-class="{dropdown: r.config.sub}" 
            data-ng-repeat="r in vm.navRoutes">
    </ul>

      <a id="addReportLink" href="" ng-click="value = 4"><b class="fa fa-plus-square"></b></a>
      <div style="float:left;">
         <!-- TREEVIEW WIDGET WITH k-template option-->
          <span id="treeview" kendo-tree-view="tree" 
            style="color:white;"
            k-template="vm.treeItemTemplate"
            k-options="vm.treeOptions"
            k-data-source="vm.reportsTree"
            k-on-change="vm.onTreeSelect(kendoEvent)">
        </span>      
      </div>         
 </div>    

我的 sidebar.js Controller 是:

(function () { 
'use strict';

var controllerId = 'sidebar';
angular.module('app').controller(controllerId,
    ['$route', 'config', 'routes', 'datacontext', '$scope', sidebar]);

function sidebar($route, config, routes, datacontext, $scope) {
    var vm = this;

    vm.isCurrent = isCurrent;

    vm.onTreeSelect = onTreeSelect; // TreeView select event
    vm.selectedReport = '';

    vm.treeOptions = {         // SET TREEVIEW OPTIONS !!
        checkboxes: {
            checkChildren: true                
        },
        dragAndDrop: true
    };
    vm.reportsTree = [];        

    // SET KENDO TEMPLATE HERE !
    vm.treeItemTemplate = "<a href='\?reptname='{{dataItem.reptName}}'> {{dataItem.text}} </a>";
    activate();

    function activate() {
              getNavRoutes(); getReportsTree() 
    }

    function getNavRoutes() {
        vm.navRoutes = routes.filter(function(r) {
            return r.config.settings && r.config.settings.nav;
        }).sort(function(r1, r2) {
            return r1.config.settings.nav - r2.config.settings.nav;
        });
    }        
    function isCurrent(route) {
        if (!route.config.title || !$route.current || !$route.current.title) {
            return '';
        }
        var menuName = route.config.title;
        return $route.current.title.substr(0, menuName.length) === menuName ? 'current' : '';
    }
    function getReportsTree() {
        return datacontext.getReportsTree().then(function (data) {
            return vm.reportsTree = data;
        });
    }
    function onTreeSelect(e) {
        vm.selectedReport = e.sender._current.text();
        console.log("Selected report: ", vm.selectedReport);
    }         
};
})();

当我开始学习 Angular 以及与 Kendo UI 的集成时，任何建议或指导都将不胜感激。

此致。
鲍勃

Answer 1

k-template="vm.treeItemTemplate"无法使用 href 链接工作，并且没有人就此提供任何建议。
我最终使用了:

   vm.onTreeSelect = onTreeSelect;

在我的 Controller 代码中；在 onTreeSelect() 函数中，我使用带参数的 $location 服务重定向了 url:

   $location.url(<url with parameters>);

然后 $location.hash() 方法检索目标页面上的查询字符串。