Как связать данные в элементе title, используя angular.js

Я изучаю Angular.js и я установил <title>{{title}}</title> и я пытаюсь изменить это, используя элемент выбора

<select ng-model="user.title">
    <option value="Lorem">Lorem</option>
    <option value="Ipsum">Ipsum</option>
    <option value="Dolor">Dolor</option>
</select>

я попробую ng-change а также ng-select с set()

function ctrl($scope) {
    $scope.title = 'hello'; // this set the title
    $scope.set = function() {
        $scope.title = $scope.user.title; // this not
    };
}

Функция не работает, но она работает, когда я просто установил ее без функции.

Я также пытаюсь создать директиву change:

app.directive('change', function() {
    console.log('change');
    return {
        link: function(scope, element, attrs) {
            console.log(arguments);
            element[0].onChange = function() {
                scope[attrs[0]]();
            };
        }
    };
});

но это тоже не работает. Console.log не выполняется вообще.

Источник

5 ответов

Решение

Все должно работать без лишнего кода:

<html data-ng-app="app">
  <head>
    <title>{{title}}</title>
  </head>
  <body>
    {{title}}
    <select ng-model="title">
      <option value="Lorem">Lorem</option>
      <option value="Ipsum">Ipsum</option>
      <option value="Dolor">Dolor</option>
    </select>
  </body>
</html>

И это все. Вот ручка.

Источник

При работе с тегом title вы должны использовать ng-bind-template, чтобы вы не увидели выражение в исходном состоянии. {{someVar}} до того, как Angular получит шанс. Вы можете добавить исходный текст заголовка в тег заголовка, и он будет перезаписан вашим шаблоном.

<html data-ng-app="app">
  <head>
    <title ng-bind-template="My App - {{title}}">My App - Default Title</title>
  </head>
  <body>
    {{title}}
    <select ng-model="title">
      <option value="Lorem">Lorem</option>
      <option value="Ipsum">Ipsum</option>
      <option value="Dolor">Dolor</option>
    </select>
  </body>
</html>
Источник

Используйте $rootScope

.when('/', {
   templateUrl: '/templates/page/home.html',
   controller: ['$scope','$rootScope', function ($scope,$rootScope) {
      $rootScope.title = 'Учитель24.рф';
 }]});
Источник

Я выяснил одно решение, чтобы установить заголовок в <title> тег.

main.js:

app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function($routeProvider,$locationProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider.
      when("/faq", {
      controller: "MYCtrl",
      templateUrl: "../assets/templates/faq.html",
      title: "FAQ"
    });  

}]);


app.run(['$location', '$rootScope', function( $location, $rootScope ){
  $rootScope.$on("$routeChangeSuccess", function(event, currentRoute, previousRoute) {
    $rootScope.title = currentRoute.title;
  });
}]);

application.html.erb:

<title ng-bind="'MYAPP - ' + $root.title"></title>

Источник

Поскольку @madhead дал вам отличный ответ, я просто хочу пролить свет на ваш вопрос о том, почему ваш код не работает.

Вы можете определенно использовать ng-changeПожалуйста, посмотрите на этот код. Ваш подход очень близок, и я думаю, может быть, вы что-то упустили?

<ul ng-app="myapp" ng-controller="MainCtrl">
    <div>{{title}}</div>
    <select ng-model="user.title" ng-change="set()">
        <option value="Lorem">Lorem</option>
        <option value="Ipsum">Ipsum</option>
        <option value="Dolor">Dolor</option>
    </select>
</ul>

function MainCtrl($scope) {
    $scope.set = function () {
        $scope.title = $scope.user.title;
    };
}

Я хочу указать на одну вещь. Если вы тестируете в jsfiddle, не используйте <title>{{title}}</title>использовать <div>{{title}}</div> вместо. Каким-то образом заголовок тега не будет отображаться правильно в демонстрационном окне.

демонстрация

Источник
Другие вопросы по тегам