Question

我有一个index.html页面，其中包含以下代码

<html>
<head>
<title>{{title}}</title>
</head>
</html>

我得到了一个view.html

<div ng-controller="changeCtrl">
<input type="text" ng-model="page-title">
</div>

路由工作完美，

现在，当我输入时，如何将page-title模型绑定到{{title}}？

由于

Answer 1

要避免使用$ rootScope或移动ng-app，请使用服务来处理设置页面标题。在下面的代码片段中，我给出了一个使用服务的示例。

angular.module('app', [])

.service('PageService', function($window) {
    return {
       setTitle: function (newTitle) { $window.document.title = newTitle; }
    };
})

.controller('ChangeCtrl', function(PageService) {
    this.setPageTitle = PageService.setTitle;
});

<html>
    <head>
        <title>My Awesome App</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    </head>
    <body ng-app="app">
        <div ng-controller="ChangeCtrl as ctrl">
            <label>{{ctrl.title}}</label>
            <input type="text" ng-model="ctrl.title" ng-change="ctrl.setPageTitle(ctrl.title)">
        </div>
    </body>
</html>

Answer 2

首先，由于表达式位于html根元素下，因此角度应用程序必须覆盖＆＃34;这个元素。所以ng-app应该在html元素上：

<html ng-app="app">

其次，由于表达式在任何控制器范围之外，因此angular会查找$ rootScope中的title字段。因此，您需要在控制器处理的视图内输入字段来修改$ rootScope属性的值。

无法完成：

<input ng-model="title" />

将在控制器范围上设置字段title。但是，可以做的是通过在根作用域中定义的作用域继承来访问对象，并修改其中一个属性。因此，首先要确保根范围中存在这样的对象：

angular.module('app').run(function($rootScope) {
    $rootScope.page = {
        title: 'default title'
    };
});

然后更改表达式以访问此对象的title属性：

<title>{{ page.title }}</title>

并在控制器视图中：

<input ng-model="page.title" />

Answer 3

将所有数据绑定设置在ng-controllers范围内，即{{title}}应该在内部，或者移动到ng-controller到html标记，:)）

AngularJS从视图中更改页面标题

3 个答案: