2013-09-18 4 views
0

Я использую Угловое зерно (загрузка с угловой веб-страницы) и пытаюсь отобразить данные из контроллера области внутри частичного. это код:Угловое связывание в частицах

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> 

Я ожидал увидеть данные, определенные в контроллере, однако я просто видеть: «Это парциальное для просмотра 1. {{данные}}»

ответ

1

Это:

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

В случае, если :

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

Я думаю, что основная проблема заключается в том, что вы не передаете $ scope в функцию контроллера. Вы должны были получить сообщение об ошибке на консоли вашего браузера. Смотрите рабочий Plunker здесь:

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"; 
}]); 
Смежные вопросы