[javascript] AngularJS 부분보기를 기반으로 헤더를 동적으로 변경하는 방법은 무엇입니까?

JAVASCRIPT / 글쓴이

ng-view를 사용하여 AngularJS 부분보기를 포함하고 있으며 포함 된보기를 기반으로 페이지 제목과 h1 헤더 태그를 업데이트하고 싶습니다. 이것들은 부분 뷰 컨트롤러의 범위를 벗어나므로 컨트롤러의 데이터 세트에 바인딩하는 방법을 알 수 없습니다.

ASP.NET MVC 인 경우 @ViewBag를 사용 하여이 작업을 수행 할 수 있지만 AngularJS에서 이에 해당하는 것을 모릅니다. 공유 서비스, 이벤트 등을 검색했지만 여전히 작동하지 않습니다. 내 예제를 수정하여 작동하도록하는 방법은 대단히 감사하겠습니다.

내 HTML :

<html data-ng-app="myModule">
<head>
<!-- include js files -->
<title><!-- should changed when ng-view changes --></title>
</head>
<body>
<h1><!-- should changed when ng-view changes --></h1>

<div data-ng-view></div>

</body>
</html>

내 JavaScript :

var myModule = angular.module('myModule', []);
myModule.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/test1', {templateUrl: 'test1.html', controller: Test1Ctrl}).
        when('/test2', {templateUrl: 'test2.html', controller: Test2Ctrl}).
        otherwise({redirectTo: '/test1'});
}]);

function Test1Ctrl($scope, $http) { $scope.header = "Test 1";
                                  /* ^ how can I put this in title and h1 */ }
function Test2Ctrl($scope, $http) { $scope.header = "Test 2"; }

답변

<html>레벨 에서 컨트롤러를 정의 할 수 있습니다.

 <html ng-app="app" ng-controller="titleCtrl">
   <head>
     <title>{{ Page.title() }}</title>
 ...

service :를 작성 Page하고 제어기에서 수정하십시오.

myModule.factory('Page', function() {
   var title = 'default';
   return {
     title: function() { return title; },
     setTitle: function(newTitle) { title = newTitle }
   };
});

Page컨트롤러에서 ‘Page.setTitle ()’을 삽입 하고 호출하십시오.

구체적인 예는 다음과 같습니다. http://plnkr.co/edit/0e7T6l

답변

라우팅을 사용하는 경우 페이지 제목을 설정하는 좋은 방법을 발견했습니다.

자바 스크립트 :

var myApp = angular.module('myApp', ['ngResource'])

myApp.config(
    ['$routeProvider', function($routeProvider) {
        $routeProvider.when('/', {
            title: 'Home',
            templateUrl: '/Assets/Views/Home.html',
            controller: 'HomeController'
        });
        $routeProvider.when('/Product/:id', {
            title: 'Product',
            templateUrl: '/Assets/Views/Product.html',
            controller: 'ProductController'
        });
    }]);

myApp.run(['$rootScope', function($rootScope) {
    $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
        $rootScope.title = current.$$route.title;
    });
}]);

HTML :

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title ng-bind="'myApp &mdash; ' + title">myApp</title>
...

편집 : ng-bindcurls 대신 속성을 사용하여 {{}}로드시 표시되지 않음

답변

자바 스크립트로 제목을 직접 설정할 수도 있습니다. 즉,

$window.document.title = someTitleYouCreated;

이것은 데이터 바인딩을 가지고 있지 않지만, 퍼팅 때 충분 ng-app에 <html>태그하는 것은 문제가있다. 예를 들어 <head>정확히 한 곳에 정의 된 JSP 템플리트를 사용 하지만 둘 이상의 앱이 있습니다.

답변

선언 ng-app온 html요소 것은 모두를위한 루트 범위 제공 head및 body.

따라서 컨트롤러에서 다음 $rootScope에 헤더 속성을 삽입 하고 설정하십시오.

function Test1Ctrl($rootScope, $scope, $http) { $rootScope.header = "Test 1"; }

function Test2Ctrl($rootScope, $scope, $http) { $rootScope.header = "Test 2"; }

그리고 귀하의 페이지에서 :

<title ng-bind="header"></title>

답변

모듈 angularjs-viewhead 은 사용자 지정 지시문 만 사용하여 뷰별로 제목을 설정하는 메커니즘을 보여줍니다.

컨텐츠가 이미 뷰 제목 인 기존 뷰 요소에 적용 할 수 있습니다.

<h2 view-title>About This Site</h2>

… 독립형 요소로 사용할 수 있습니다.이 경우 요소는 렌더링 된 문서에서 보이지 않으며보기 제목을 설정하는 데만 사용됩니다.

<view-title>About This Site</view-title>

이 지시문의 내용은 루트 범위에서로 사용할 viewTitle수 있으므로 다른 변수와 마찬가지로 제목 요소에서 사용할 수 있습니다.

<title ng-bind-template="{{viewTitle}} - My Site">My Site</title>

루트 범위를 “볼”수있는 다른 지점에서도 사용할 수 있습니다. 예를 들면 다음과 같습니다.

<h1>{{viewTitle}}</h1>

이 솔루션을 사용하면 나머지 프레젠테이션을 제어하는 ​​데 사용되는 것과 동일한 메커니즘 인 AngularJS 템플릿을 통해 제목을 설정할 수 있습니다. 이를 통해이 프리젠 테이션 로직으로 컨트롤러를 복잡하게 만들 필요가 없습니다. 컨트롤러 는 제목 을 알리는 데 사용할 데이터를 제공해야 하지만 템플릿은 제목을 표시하는 방법을 최종적으로 결정하고 식 보간 및 필터를 사용하여 스코프 데이터를 정상적으로 바인딩 할 수 있습니다.

(면책 조항 : 나는이 모듈의 저자이지만 다른 사람 이이 문제를 해결하는 데 도움이되기를 희망하면서 여기에서 참조하고 있습니다.)

답변

다음은 리소스 별 페이지 제목을 설정하기 위해 컨트롤러에 $ rootScope를 주입 할 필요가없는 적합한 솔루션입니다.

마스터 템플릿에서 :

<html data-ng-app="myApp">
    <head>
    <title data-ng-bind="page.title"></title>
    ...

라우팅 구성에서 :

$routeProvider.when('/products', {
    title: 'Products',
    templateUrl: '/partials/products.list.html',
    controller: 'ProductsController'
});

$routeProvider.when('/products/:id', {
    templateUrl: '/partials/products.detail.html',
    controller: 'ProductController'
});

그리고 실행 블록에서 :

myApp.run(['$rootScope', function($rootScope) {
    $rootScope.page = {
        setTitle: function(title) {
            this.title = title + ' | Site Name';
        }
    }

    $rootScope.$on('$routeChangeSuccess', function(event, current, previous) {
        $rootScope.page.setTitle(current.$$route.title || 'Default Title');
    });
}]);

마지막으로 컨트롤러에서 :

function ProductController($scope) {
    //Load product or use resolve in routing
    $scope.page.setTitle($scope.product.name);
}

답변

jkoreska의 솔루션은 미리 제목을 알고 있으면 완벽하지만 리소스 등에서 얻은 데이터를 기반으로 제목을 설정해야 할 수도 있습니다.

내 솔루션에는 단일 서비스가 필요합니다. rootScope는 모든 DOM 요소의 기반이므로 언급 된 사람과 같이 html 요소에 컨트롤러를 배치 할 필요가 없습니다.

Page.js

app.service('Page', function($rootScope){
    return {
        setTitle: function(title){
            $rootScope.title = title;
        }
    }
});

index.jade

doctype html
html(ng-app='app')
head
    title(ng-bind='title')
// ...

제목을 변경해야하는 모든 컨트롤러

app.controller('SomeController', function(Page){
    Page.setTitle("Some Title");
});