Question

我正在尝试创建一个允许我操纵ng-view之外的变量的服务。我使用factory进行了服务，但我不知道如何将变量从子控制器传输到父级（至少，这是我通过阅读q＆amp; a＆＃39; s找到的方法。在这里SO）。

例如，我希望能够操纵位于{{ siteName }}控制器ng-view之外的articleCtrl。

这就是我所做的：

＆＃13;

var blogApp = angular.module('blogApp', [
    'ngRoute',
    'ngSanitize',
    'blogCtrl'
]);

blogApp.config(['$routeProvider', '$locationProvider',
    function($routeProvider, $locationProvider) {
        $routeProvider.
            when('/page', {
                templateUrl: '/angular_blog/assets/templates/page.html',
                controller: 'pageCtrl'
            }).
            when('/page/:pagePermaLink', {
                templateUrl: '/angular_blog/assets/templates/page.html',
                controller: 'pageCtrl'
            }).
            when('/article/:articlePermaLink', {
                templateUrl: '/angular_blog/assets/templates/article.html',
                controller: 'articleCtrl'
            }).
            otherwise({
                redirectTo: '/page/404',
                templateUrl: '/angular_blog/assets/templates/404.html',
                controller: 'pageCtrl'
            });
        $locationProvider.html5Mode(true);
    }]);

blogApp.factory('templateService', function() {
    return {
        siteName:'',
        tagline:'',
        pageName:''
    };
});

function articleCtrl($scope, templateService) {
   $scope.template = templateService;
}

function templateCtrl($scope, templateService) {
   $scope.template = templateService;
}

var templateCtrl = angular.module('templateCtrl', []);
var blogCtrl = angular.module('blogCtrl', []);

blogCtrl.controller('articleCtrl', ['$scope', '$routeParams', '$http', 'templateService',
function($scope, $routeParams, $http, templateService) {
    $scope.siteName = "Something awesomediculous";
}]);

blogCtrl.controller('pageCtrl', ['$scope', '$routeParams', '$http',
function($scope, $routeParams, $http) {
    // ...
}]);

blogApp.controller('templateCtrl', function($scope, templateService) {
    // ...
});

＆＃13;

<!DOCTYPE html>
<html lang="en" data-ng-app="blogApp" data-ng-controller="templateCtrl">
<head>
	<meta charset="UTF-8">
	<title>{{ pageName + " - " + siteName }}</title>

	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-sanitize.min.js"></script>

	<base href="/angular_blog/">

</head>
<body>

	<header>
		<h1>{{ siteName }}</h1>
		<p>{{ tagline }}</p>
	</header>

	<main id="content" data-ng-view></main>

</body>
</html>

＆＃13;

Answer 1

您可以将siteName属性移动到templateCtrl，然后可以在所有视图中使用。

blogApp.controller('templateCtrl', function($scope, templateService) {

   // this is important as updates from child will not take effect if done on primitives
   $scope.site = {};
   $scope.site.siteName = "Something awesomediculous";
});

Answer 2

您忘记在serviceCtrl中将服务绑定到您应该执行此操作的范围。

如果您有$scope.template.myname，则应使用{{template.name}}。

请参阅下面的工作代码。

顺便说一句，你的代码中似乎有一些不必要的功能

＆＃13;

var blogApp = angular.module('blogApp', [
    'ngRoute',
    'ngSanitize',
    'blogCtrl'
]);

blogApp.config(['$routeProvider', '$locationProvider',
    function($routeProvider, $locationProvider) {
        $routeProvider.
            when('/page', {
                templateUrl: '/angular_blog/assets/templates/page.html',
                controller: 'pageCtrl'
            }).
            when('/page/:pagePermaLink', {
                templateUrl: '/angular_blog/assets/templates/page.html',
                controller: 'pageCtrl'
            }).
            when('/article/:articlePermaLink', {
                templateUrl: '/angular_blog/assets/templates/article.html',
                controller: 'articleCtrl'
            }).
            otherwise({
                redirectTo: '/page/404',
                templateUrl: '/angular_blog/assets/templates/404.html',
                controller: 'pageCtrl'
            });
        $locationProvider.html5Mode(true);
    }]);

blogApp.factory('templateService', function() {
    return {
        siteName:'mysitename',
        tagline:'mytagline',
        pageName:'mypagename'
    };
});

function articleCtrl($scope, templateService) {
   $scope.template = templateService;
}

function templateCtrl($scope, templateService) {
   $scope.template = templateService;
}

var templateCtrl = angular.module('templateCtrl', []);
var blogCtrl = angular.module('blogCtrl', []);

blogCtrl.controller('articleCtrl', ['$scope', '$routeParams', '$http', 'templateService',
function($scope, $routeParams, $http, templateService) {
    $scope.siteName = "Something awesomediculous";
}]);

blogCtrl.controller('pageCtrl', ['$scope', '$routeParams', '$http',
function($scope, $routeParams, $http) {
    // ...
}]);

blogApp.controller('templateCtrl', function($scope, templateService) {
    // ...
// added this line:
   $scope.template = templateService;
});

＆＃13;

<!DOCTYPE html>
<html lang="en" data-ng-app="blogApp" data-ng-controller="templateCtrl">
<head>
	<meta charset="UTF-8">
	<title>{{ pageName + " - " + siteName }}</title>

	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-sanitize.min.js"></script>

	<base href="/angular_blog/">

</head>
<body>

	<header>
		<h1>{{ template.siteName }}</h1>
		<p>{{ template.tagline }}</p>
	</header>

	<main id="content" data-ng-view></main>

</body>
</html>

＆＃13;

AngularJS - 操纵ng-view之外的变量

2 个答案: