Question

我正在使用Yeoman脚手架来创建一个Angular应用程序，我在添加控制器时遇到了一些麻烦。 about和main控制器自动添加并正常工作。我理解它是如何工作的。但我想在一个页面中安排视图，所以我学习使用angular-ui-router。最后我把所有视图放在页面上，当我试图在这些不同的视图中添加另一个控制器时，问题出来了。它没有工作。谢谢你的帮助！（抱歉，我没有足够的声誉来发布图片，所以请点击链接查看detils）

这张照片展示了我该怎么做。enter image description here

这是我的代码。enter image description here

的index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->
  </head>
  <body ng-app="angularApp">
    <!--[if lte IE 8]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!-- Add your site or application content here -->
    <div class="header">
      <div class="navbar navbar-default" role="navigation">
        <div class="container">
          <div class="navbar-header">

            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand" href="#/">angular</a>
          </div>

          <div class="collapse navbar-collapse" id="js-navbar-collapse">

            <ul class="nav navbar-nav">
              <!--<li class="active"><a href="#/">Home</a></li>
              <li><a ng-href="#/about">About</a></li>
              <li><a ng-href="#/">Contact</a></li>-->
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div ui-view=""></div>
    </div>


    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
     <script>
       !function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){
       (A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),
       r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)
       }(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

       ga('create', 'UA-XXXXX-X');
       ga('send', 'pageview');
    </script>

    <!-- build:js(.) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-aria/angular-aria.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-messages/angular-messages.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-touch/angular-touch.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="scripts/app.js"></script>
        <script src="scripts/controllers/menus/plan.js"></script>
        <!-- endbuild -->
</body>
</html>

app.js

'use strict';

angular
  .module('angularApp', [
    'ngAnimate',
    'ngAria',
    'ngCookies',
    'ngMessages',
    'ngResource',
    'ngSanitize',
    'ngTouch',
    'ui.router'
  ])
  .config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/index');
  $stateProvider
    .state('index', {
      url: '/index',
      views: {
        '': {
          templateUrl: 'views/index.html'
        },
        'planMap@index': {
          templateUrl: 'views/menus/plan.html'
        },
        '3DManage@index': {
          templateUrl: 'views/menus/3DManage.html'
        },
        'querys@index': {
          templateUrl: 'views/menus/querys.html'
        },
        'layers@index': {
          templateUrl: 'views/menus/layers.html'
        },
        'toolBar@index': {
          templateUrl: 'views/toolBar.html'
        },
        'terraView@index': {
          templateUrl: 'views/terraView.html'
        }
      }
    });
});

的index.html

<div class="FMenu">
<div ui-view="planMap" ></div>
  <div ui-view="3DManage"></div>
  <div ui-view="querys"></div>
   <div ui-view="layers"></div>
</div>

<div class="main-view">
  <div class="tool-bar" ui-view="toolBar"></div>
  <div class="terra-view" ui-view="terraView"></div>
</div>

视图/菜单/ plan.html

<div ng-controller='SomeController'>
  <expander class='expander' expander-title='title'>
    {{text}}
  </expander>
</div>

控制器/菜单/ plan.js

'use strict';

var angularApp = angular.module('angularApp', []);

angularApp.directive('expander', function() {
  return {
    restrict : 'EA',
    replace : true,
    transclude : true,
    scope : {
      title : '=expanderTitle'
    },
    template : '<div>' +
    '<div class="title" ng-click="toggle()">{{title}}</div>' +
    '<div class="body" ng-show="showMe" ng-transclude>' +
    '</div>' +
    '</div>',
    link : function(scope) {
      scope.showMe = false;
      scope.toggle = function() {
        scope.showMe = !scope.showMe;
      };
    }
  };
});

angularApp.controller('PlanController',function($scope) {
  $scope.title = '点击展开';
  $scope.text = '这里是内部的内容。';
});

Yeoman Team Controler问题的角度项目

0 个答案: