DevExtreme and Angular - Виджет меню

Question

Чтобы перейти к определенному URL-адресу при возникновении события itemClick, присвойте этому URL-адресу или якорной части (#) этого URL-адреса непосредственно этому параметру в виде строки. Как это сделать? Как мне назначить функцию для выполнения пользовательского действия при щелчке элемента элемента виджетов? Можете ли вы привести пример?

//Define directives to the Angular Route and DevExtreme 
var myApp = angular.module('myApp', ['ngRoute', 'dx']); 
//URL to show ? 
//var serviceHome = "http://localhost:8000/home"; 





//myApp.controller('appCtrl', function($scope, $http, $templateCache) { 
// 
// 
//  
// }); 







// create the controller and inject Angular's $scope 
myApp.controller('mainController', function($scope) { 
    // create a message to display in our view 
    $scope.message = 'Home'; 


    $scope.menuItems = [ 
     { 
      text: "Home", 
      selectable: true, 
      items: [ 
       { text: "Home", url: "#/"}, 
       { text: "UI Widgets"}, 
       { text: 'Data Visualization'}, 
       { text: "Data Layer"} 
      ] 
     }, 
     { 
      text: "About", 
      items: [ 
       { text: "About", url: "#about" }, 
       { text: "UI Widgets", beginGroup: true }, 
       { text: "Data Visualization", selected: true }, 
       { text: "Themes" }, 
       { text: "Common" } 
      ] 
     }, 
     { 
      text: "Contact", 
      items: [ 
       { text: 'Contact us', url: "#contact" }, 
       { text: 'UI Widgets' }, 
       { text: 'Data Visualization Widgets', visible: true, selectable: true }, 
       { text: 'CSS Classes' }, 
       { text: 'UI Events' }, 
       { text: 'item1', 
        items: [ 
         { text: 'First', disabled: true}, 
         { text: 'Second'} 
        ]}, 
       { text: 'item2' }, 
       { text: 'item3' }    
      ] 

     } 
    ];   

    $scope.itemClicked = function (data) { 
        DevExpress.ui.  urlFor(data.itemData.url); 
//  DevExpress.ui.notify("The \"" + data.itemData.text + "\" item is  clicked", "success", 1500); 
//  DevExpress.ui.redirectTo(data.itemData.url); 
    }; 


}); 

myApp.controller('aboutController', function($scope) { 
    $scope.message = 'About'; 
}); 

myApp.controller('contactController', function($scope) { 
    $scope.message = 'Contact us! Dr. '; 
}); 





//Exposes the current URL in the browser address bar 
//Maintains synchronization between itself and the browser's URL 
//Represents the URL object as a set of methods 
myApp.config(function($routeProvider) { 
$routeProvider 



// route for the home page 
.when('/', { 
     templateUrl : 'pages/home.html', 
     controller : 'mainController' 
}) 

// route for the about page 
.when('/about', { 
     templateUrl : 'pages/about.html', 
     controller : 'aboutController' 
}) 

// route for the contact page 
.when('/contact', { 
     templateUrl : 'pages/contact.html', 
     controller : 'contactController' 
});  


// $locationProvider.html5Mode(true); 
}); 

Спасибо

Answer 1

В вашем случае, чтобы перейти к некоторым URL вы можете использовать $location службу. Например:

HTML:

<div ng-controller="myCtrl"> 
    <div dx-menu="{ items: menuItems, onItemClick: itemClicked }"></div> 
</div> 

JavaScript:

var myApp = angular.module("myApp", ["dx"]); 

myApp.controller("myCtrl", function($scope, $location) { 
    $scope.menuItems = [ 
    { 
     text: "Tutorials", 
     url: "/url1", 
     items: [ 
      { text: "VS Integration", url: "/url2" } 
     ] 
    }, 
    { 
     text: "Guides", 
     url: "/url3", 
     items: [ 
      { text: "Demos Inside", url: "/url4" }, 
      { text: "UI Widgets", url: "/url5" } 
     ] 
    } 
    ]; 

    $scope.itemClicked = function(data){ 
     $location.path(data.itemData.url); 
    }; 
});