Question

控制器：'Html2Controller'未显示在页面上

(function () {
    'use strict';
    angular
            .module('App.employe', ['ui.router']);
    angular
            .module('App.employe').config(configure);

    function configure($stateProvider) {

        $stateProvider.state('www', {
            url: '/www',
            views: {
                '': {
                    templateUrl: 'htm1.html',
                    controller: 'Html1Controller '
                },

                'htm2': {
                    templateUrl: 'htm2.html',
                    controller: 'Html2Controller '
                } 
            }             
        });   
    }
})();

templateUrl：'htm2.html'：

<md-input-container   ng-hide="temp" >

    <md-select>                
        <md-option ng-repeat="(index, user) in users" ng-value="index">
               {{ user.name }}
        </md-option>
    </md-select> 
</md-input-container>

我不知道要在网站上出现什么来纠正

Answer 1

如果我没弄错，ui.router的正确语法是：

var sampleRoute = {
    name: 'www', 
    url: '/www',
    template: '<span>some content</span>' 
};

$stateProvider.state(sampleRoute);

查看以下文档：https://ui-router.github.io/ng1/

Answer 2

我怀疑您没有在HTML中为您所在州定义的htm2视图创建命名视图。下面是一个简单的示例，说明如何在您所在州定义的未命名视图旁边使用命名视图：

angular.module('app', ['ui.router'])
  .config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/www');
    var wwwState = {
      name: 'www',
      url: '/www',
      views: {
        '': {
          template: '<h1>Html1Controller</h1><div>{{$ctrl.message}}</div>',
          controller: 'Html1Controller as $ctrl'
        },
        'htm2': {
          template: '<h1>Html2Controller</h1><div>{{$ctrl.message}}</div>',
          controller: 'Html2Controller as $ctrl'
        }
      }
    };
    $stateProvider.state(wwwState);
  })
  .controller('Html1Controller', function() {
    this.message = 'In Html1Controller';
  })
  .controller('Html2Controller', function() {
    this.message = 'In Html2Controller';
  });;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.18/angular-ui-router.min.js"></script>
<div ng-app="app">
  <div ui-view></div>
  <div ui-view="htm2"></div>
</div>

stateProvider不加载所有组件

2 个答案: