控制器在路线中不起作用 [英] Controller does not work in route
问题描述
我想添加与控制器的链接以进行路由,但控制器不起作用.我明白了:
I would like to add link with controller to route but controller does not work. I get this:
{{title}}
{{title}}
{{shortTitle}}
{{shortTitle}}
{{text}}
如果我只将控制器放到html上也不起作用
If I will put controller only to html also does not work
但是当我将脚本添加到Default.html控制器中的主控制器时,其工作正常我在哪里弄错了?
but when I added script to main controller in Default.html controller working correct Where I made mistake?
@SSH无效
$stateProvider
.state('home', {
url: '/',
template: '<div data-ng-include="'Scripts/js_angular_project/website/home/homePage.html'"></div>',
controller: 'homeCtrl'
})
homePage.html
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这也不起作用
@SSH this also does not work
$stateProvider
.state('home', {
url: '/',
templateURL: '/Scripts/js_angular_project/website/home/homePage.html',
controller: 'homeCtrl'
})
homePage.HTML-我删除了ng-controller
homePage.HTML - I remove 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在我输入代码时不起作用
@SSH this not work when I put my code
.html
推荐答案
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"
.
you should put controller name in router and also remove ng-controller = "homeCtrl"
from template.
state('home' ,{
url : '/',
templateUrl:'/yourTempalteAddress',
controller:'homeCtrl'
})
并在控制器中定义您的应用.
and define your app in controller.
var app = angular.module("yourApp",[]);
app.controller('homeCtrl', function ($scope) {
$scope.title = "Volvo";
$scope.shortTitle = "Volvo";
$scope.text = "example";
});
这篇关于控制器在路线中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!