DevExtreme 和 Angular - 菜单小部件

Question

要在 itemClick 事件触发时导航到特定 URL，请将 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);
    };
});

DevExtreme 和 Angular - 菜单小部件

DevExtreme and Angular - Menu Widget

javascript

devexpress

widget

angularjs

devextreme