DevExtreme and Angular

To navigate to a specific URL when the itemClick event fires, assign that URL or the anchor part (#) of that URL directly to this option as a string. How to do? How do I get assign a function to perform a custom action when a widget item is clicked? Can you get some example to do that?

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

Thank you

---

In your case, to navigate to some url you can use the $location service. For example:

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

链接地址: http://www.djcxy.com/p/5234.html

上一篇: Devextreme JS DXGrid如何在代码后面调用cellTemplate

下一篇: DevExtreme和Angular