Question

我想添加与控制器的链接路由，但控制器不起作用。我明白了：

{{标题}}

{{shortTitle}}

{{文本}}

如果我只将控制器放到html也不起作用

但是当我在Default.html控制器中向主控制器添加脚本时，工作正确哪里弄错了？

@SSH这不起作用

$stateProvider
.state('home', {
    url: '/',
    template: '<div data-ng-include="&#39;Scripts/js_angular_project/website/home/homePage.html&#39;"></div>',
    controller: 'homeCtrl'
})

homePage.html

<div>
    <h2>{{title}}</h2>
    <h3>{{shortTitle}}</h3>
    <p>{{text}}</p>
</div>
<script>
    app.controller('homeCtrl', function ($scope) {
        $scope.title = "Volvo";
        $scope.shortTitle = "Volvo";
        $scope.text = "example";
    });
</script>

@SSH这也不起作用

 $stateProvider
    .state('home', {
        url: '/',
        templateURL: '/Scripts/js_angular_project/website/home/homePage.html',
        controller: 'homeCtrl'
    })

homePage.HTML - 我删除了ng-controller

<div>
    <h2>{{title}}</h2>
    <h3>{{shortTitle}}</h3>
    <p>{{text}}</p>
</div>
<script>
    app.controller('homeCtrl', function ($scope) {
        $scope.title = "Volvo";
        $scope.shortTitle = "Volvo";
        $scope.text = "example";
    });
</script>

@SSH当我输入我的代码

时这不起作用

html的

Answer 1

var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
    
    $urlRouterProvider.otherwise('/home');
    
    $stateProvider
        .state('home', {
            url: '/home',
            template: '<div><h2>{{title}}</h2><h3>{{shortTitle}}</h3><p>{{text}}</p></div>',
            controller:'homeCtrl'
        })
        .state('about', {
            url: '/about',
             template: '<div><h2>{{title}}</h2><h3>{{shortTitle}}</h3><p>{{text}}</p></div>',
             controller:'aboutCtrl'
            })
});

routerApp.controller('homeCtrl', function ($scope) {
        $scope.title = "Volvo";
        $scope.shortTitle = "Volvo";
        $scope.text = "example";
    });
    
    routerApp.controller('aboutCtrl', function ($scope) {
        $scope.title = "Volvo2";
        $scope.shortTitle = "Volvo2";
        $scope.text = "example2";
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>

<div ng-app="routerApp">
<nav class="navbar navbar-inverse" role="navigation">
    <ul class="nav navbar-nav">
        <li><a ui-sref="home">Home</a></li>
        <li><a ui-sref="about">About</a></li>
    </ul>
</nav>

<div class="container">
    <div ui-view></div>
</div>
</div>

您应该将控制器名称放在路由器中，并从模板中删除ng-controller = "homeCtrl"。

   state('home' ,{
      url : '/',
      templateUrl:'/yourTempalteAddress',
      controller:'homeCtrl' 
    })

并在控制器中定义您的应用。

    var app = angular.module("yourApp",[]);
    app.controller('homeCtrl', function ($scope) {
     $scope.title = "Volvo";
     $scope.shortTitle = "Volvo";
     $scope.text = "example";
     });

控制器在路由中不起作用

1 个答案: