0
AngularJSがメニュー項目の変更方法を変更しましたか？私が尋ねる理由は、ドキュメントにmd-nav-click="goto('#report')"を使用するように言われていますが、私はそれを実行してもスクリプトを実行しません。完全なスクリプトについては以下を参照してください。md-nav-clickが機能しない
<md-nav-bar>
<md-nav-item><a href="#/" name="home">Home</a></md-nav-item>
<md-nav-item md-nav-click="goto('#report')" name="page2">Page Two</md-nav-item>
<md-nav-item md-nav-click="goto('page3')" name="page3">Page Three</md-nav-item>
</md-nav-bar>
全スクリプト
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
</head>
<body ng-app="IPETLOST" ng-cloak>
<!--
Your HTML content here
-->
<div layout="column" layout-fill>
<md-toolbar>
<div class="md-toolbar-tools" ng-controller="demoController">
<span ng-bind="data.sitename"></span>
<!-- fill up the space between left and right area -->
<span flex></span>
<md-nav-bar>
<md-nav-item><a href="#/" name="home">Home</a></md-nav-item>
<md-nav-item md-nav-click="goto('#report')" name="page2">Page Two</md-nav-item>
<md-nav-item md-nav-click="goto('page3')" name="page3">Page Three</md-nav-item>
</md-nav-bar>
</div>
</md-toolbar>
<md-content>
Hello!
<div data-ui-view=""></div>
<div data-ui-view="header"></div>
<div data-ui-view="left"></div>
<div data-ui-view="container"></div>
<div data-ui-view="footer"></div>
</md-content>
</div>
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-alpha.5/angular-ui-router.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
<!-- Your application bootstrap -->
<script type="text/javascript">
/**
* You must include the dependency on 'ngMaterial'
*/
var ipetApp = angular.module('IPETLOST', ['ngMaterial', 'ngMessages', 'ui.router']);
ipetApp.config(function ($locationProvider, $urlRouterProvider, $stateProvider) {
$urlRouterProvider.deferIntercept();
$urlRouterProvider.otherwise('/404');
$locationProvider.html5Mode({enabled: false});
$stateProviderRef = $stateProvider;
});
ipetApp.controller('demoController', function ($scope) {
$scope.data = {
sitename: "IPET Lost Pet's"
}});
ipetApp.run(['$rootScope', '$state', '$stateParams',
function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}])
ipetApp.run(['$q', '$rootScope','$http', '$urlRouter',
function ($q, $rootScope, $http, $urlRouter)
{
$http
.get("json.json")
.success(function(data)
{
angular.forEach(data, function (value, key)
{
var state = {
"url": value.url,
"parent" : value.parent,
"abstract": value.abstract,
"views": {}
};
angular.forEach(value.views, function (view)
{
state.views[view.name] = {
templateUrl : view.templateUrl,
};
});
$stateProviderRef.state(value.name, state);
});
// Configures $urlRouter's listener *after* your custom listener
$urlRouter.sync();
$urlRouter.listen();
});
}]);
</script>
</body>
</html>
http://codepen.io/russellharrower/pen/YWZmre
は[MCVE]素晴らしいことです！ –