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-selectますset()

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 に答える
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 に答える