10

我正在学习 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-selectset()

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

该功能不起作用，但是当我在没有功能的情况下设置它时它起作用。

我还尝试创建更改指令：

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 根本不执行。

4

5 回答 5

19

在处理标题标签时，您应该使用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>
于 2014-07-23T22:15:36.193 回答
4

使用 $rootScope

.when('/', {
   templateUrl: '/templates/page/home.html',
   controller: ['$scope','$rootScope', function ($scope,$rootScope) {
      $rootScope.title = 'Учитель24.рф';
 }]});
于 2014-03-03T07:31:03.780 回答
3

既然@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>而是使用。不知何故，标题标签将无法在演示窗口中正确显示。

Demo

于 2013-08-09T21:35:24.563 回答
3

我想出了一种在<title>标签中设置标题的解决方案。

主.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;
  });
}]);

应用程序.html.erb：

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

于 2014-04-11T07:26:47.160 回答
2

没有额外的代码，一切都应该正常工作：

<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>

就这样。这是一支笔。

于 2013-08-09T20:57:49.923 回答