Question

我从这里得到了一个例子：http://scotch.io/tutorials/javascript/angular-routing-using-ui-router我看到了一个关于如下使用route-ui的例子：

$stateProvider

    // HOME STATES AND NESTED VIEWS ========================================
    .state('home', {
        url: '/home',
        templateUrl: 'partial-home.html'
    })

    // nested list with custom controller
    .state('home.list', {
        url: '/list',
        templateUrl: 'partial-home-list.html',
        controller: function($scope) {
            $scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
        }
    })

    // nested list with just some random string data
    .state('home.paragraph', {
        url: '/paragraph',
        template: 'I could sure use a drink right now.'
    })

我的问题是：如何在其他文件中使用控制器，然后将该控制器的名称调用为.state的选项？

这是我想在其他文件中使用的控制器：

(function () {
    'use strict';
    angular.module("myCtrl", [])
    .controller('myCtrl', function ($scope) {
        $scope.dogs = ['name 1', 'name 2', 'name 3', 'name 4']; 
    })
})();

这是我的溃败：

var routerApp = angular.module('routerApp', ['ui.router']);

routerApp.config(function ($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/home');

    $stateProvider

        .state('home', {
            url: '/home',
            templateUrl: 'home/partial-home.html',
            controller: 'myCtrl'
        })

        .state('about', {
            url: '/about',
            templateUrl: 'about/partial-about.html'
        });

});

以下是我的html页面：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>testRoute</title>

    <!-- testRoute references -->
    <link href="css/index.css" rel="stylesheet" />
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body ng-app="routerApp">
    <ul class="nav navbar-nav">
        <li><a ui-sref="home">Home</a></li>
        <li><a ui-sref="about">About</a></li>
    </ul>
    <div ui-view></div>
    <!-- Cordova reference, this is added to your app when it's built. -->
    <script src="cordova.js"></script>
    <script src="scripts/platformOverrides.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-resource.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-route.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.js"></script>

    <script src="scripts/index.js"></script>
    <script src="scripts/app.js"></script>
    <!--<script src="scripts/myController.js"></script>-->
</body>
</html>

Answer 1

你是否尝试过做控制器：＆＃39; Name_of_your_Controller＆＃39;？

如何在route-ui中使用其他文件js中的控制器

1 个答案: