0

私は Angular シード (Angular Web ページからダウンロード) を使用しており、パーシャル内のスコープのコントローラーからのデータを表示しようとしています。これはコードです：

app.js

'use strict';
// Declare app level module which depends on filters, and services
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives',      'myApp.controllers']).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller:   'mainPage'});
  $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
   $routeProvider.otherwise({redirectTo: '/view1'});

   }]);

controllers.js

'use strict';

 /* Controllers */

angular.module('myApp.controllers', []).
controller('mainPage', ['$scope',function() {

  $scope.data= "this is my data";
}])
  .controller('MyCtrl2', [function() {

 }]);

index.html

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<ul class="menu">
<li><a href="#/view1">view1</a></li>
<li><a href="#/view2">view2</a></li>
</ul>

<div ng-view></div>
... some more angular includes etc

partial1.html

<p>This is the partial for view 1. {{data}}</p>

controller で定義されたデータが表示されることを期待していましたが、単に「これはビュー 1 のパーシャルです。{{data}}」と表示されます。

4

2 に答える 2

2

主な問題は、コントローラー関数に $scope を渡していないことだと思います。ブラウザ コンソールにエラーが表示されるはずです。ここで動作するプランカーを参照してください。

http://plnkr.co/edit/ItziGeIVI5a9L56P1UCx

var myApp = angular.module('myApp', []).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view1', {templateUrl: 'partial1.html', controller:   'mainPage'});
  $routeProvider.when('/view2', {templateUrl: 'partial2.html', controller: 'MyCtrl2'});
   $routeProvider.otherwise({redirectTo: '/view1'});

   }]);

myApp.controller('mainPage', ['$scope',function($scope) {
  $scope.data = "this is my data";
}])
.controller('MyCtrl2', ['$scope', function($scope) {
  $scope.data = "this is my data 2";
}]);
于 2013-09-18T14:50:42.280 に答える
1

これ：

controller('mainPage', ['$scope', function() {
  $scope.data= "this is my data";
}])

次のようにする必要があります。

controller('mainPage', ['$scope', function($scope /* ADD THIS */) {
  $scope.data= "this is my data";
}])
于 2013-09-18T14:45:08.390 に答える