Question

我是angularJS的新手。这是我的主页index.cshtml

<!DOCTYPE html>
<html ng-app="AngularUIApp" ng-controller="checkController">
<head>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <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="#/">School Buddy</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a ui-sref="schools">Schools<span class="sr-only">(current)</span></a></li>
                <li><a ui-sref="classrooms">Classrooms</a></li>
                <li><a ui-sref="activities">Activities</a></li>       
             </ul>

        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div ui-view></div>
    @Scripts.Render("~/bundles/angularlib")
    @Scripts.Render("~/bundles/AngularApppp")
    <script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js"></script>
    <script src="~/Scripts/Controllers/HomeTabController.js"></script>
</body>
</html>


checkController.js
var checkcontroller = function ($scope) {
    $scope.name = 'roy';
};

checkcontroller.$inject = ['$scope'];





AngularUIApp.js
'use strict';
var AngularUIApp= angular.module(‘AngularUIApp’, ['ui.router']);
AngularUIApp.config(['$stateProvider','$urlRouterProvider', function ($stateProvider, $urlRouterProvider)
{
    $stateProvider

       // HOME STATES AND NESTED VIEWS ========================================
       .state('home', {
           url: '/',
           templateUrl: 'Tab/home',
           controller: 'HomeTab1Controller'

       })

         .state('schools', {
             url: '/schools',
           template: '<h4>schooltab</h4>'
         })
    .state('classrooms', {
        url: '/classrooms',
       template: '<h4>classroomtab</h4>'
            })
    .state('activities', {
        url: '/activities',
        template: '<h4>activitytab</h4>'

    })
}])
AngularUIApp.controller('checkController', checkController);

AngularUIApp.controller('HomeTab1Controller',function($scope){
    $scope. msg = 'HomeMessage';
});




Tab/home.cshtml page
    <div>

       {{msg}}

        Home tab

    </div>

当我点击SchoolBuddy时，HomeTab1Controller没有加载，其他链接正在运行。（他们没有控制器。将编写直接Html。）

Answer 1

对于HomeTab1Controller，需要放置$ scope。

AngularUIApp.controller('HomeTab1Controller',["$scope", function($scope){
    $scope. msg = 'HomeMessage';
}]);

这解决了我的问题。

Angular UI路由器控制器似乎没有加载

1 个答案: