Jak powiązać dane w tytule elementu używając angularjs

uczę angularjs i ustawić <title>{{title}}</title> i staram się to zmienić za pomocą elementu selectJak powiązać dane w tytule elementu używając angularjs

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

staram ng-change i ng-select z set()

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

Funkcja nie działa, ale działa, gdy ustawię ją bez funkcji.

Staram się też tworzyć dyrektywy Zmiana:

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

ale to też nie działają. Console.log w ogóle nie działają.

Źródło

2013-08-09 jcubic

Wyjazd odpowiedź CSharp za http://stackoverflow.com/a/24921980/243034 Pozwoli swoją stronę, aby być właściwie i wyświetlacz indeksowane w wynikach wyszukiwania z prawidłowym domyślnie zamiast pojawiać jako {{aplikacji .title}} (lub cokolwiek wybierzesz). – Calebj

Wszystko powinno działać dobrze bez dodatkowego kodu:

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

I to wszystko. Here is a pen.

Źródło

2013-08-09 20:57:49 madhead

Nie, to jest zasada codepen. Nie pokazuje rzeczywistego tytułu, ponieważ pióro jest załadowane w elemencie iframe (a tytuł jest dołączany jako pierwsze dziecko do ciała). Wykop go za pomocą narzędzi programistycznych i zobacz, czy się zmienia, lub spróbuj na własnym przykładzie. (Używam yeomana z generatorem kątowym do szybkich testów). – madhead

Od kiedy @madhead dał Ci niesamowitą odpowiedź, chciałbym rzucić nieco światła na twoje pytanie, dlaczego twój kod nie działa.

Możesz zdecydowanie użyć ng-change, proszę spojrzeć na ten kod. Twoje podejście jest bardzo bliskie i wydaje mi się, że coś przeoczyłeś?

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

chcę podkreślić jedną rzecz. Jeśli testujesz w jsfiddle, nie używaj <title>{{title}}</title>, zamiast tego użyj <div>{{title}}</div>. W jakiś sposób tytuł tag nie będzie wyświetlany poprawnie w oknie demonstracyjnym.

Demo

Źródło

2013-08-09 21:35:24 zsong

Mam dokładnie to samo, ale ustawiam ng-app i ng-controller na obiekt html. Jeśli ustawię '$ scope.title' w sterowniku, zmieniam tytuł, ale nie, jeśli wstawię go do funkcji. – jcubic

'ng-app' można ustawić w' ',' ng-controller' powinien iść z '' Chyba spróbuj. – zsong

Oba ładunki jsFiddle i Codepen są wynikiem iframe, więc sekcja '' nie może być poprawnie przetestowana z tymi awesamami. – madhead

Zastosowanie $ rootScope

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

Źródło

2014-03-03 07:31:03

zorientowali się jedno rozwiązanie, aby ustawić tytuł <title> tagu.

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>

Źródło

2014-04-11 07:26:47 PythonDev

Gdy mamy do czynienia z tytułem tagu należy użyć ng-bind-template więc nie widzę wyraz w jego stan surowy {{someVar}} zanim Angular ma szansę na wejście. Możesz dodać początkowy tekst tytułu w tagu tytułu, który zostanie nadpisany przez twój szablon.

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

Źródło

2014-07-23 22:15:36 CSharp

Dodatkowo musiałem dodać atrybut '' do elementu 'head', aby go uruchomić. – PyreneesJim

Jak powiązać dane w tytule elementu używając angularjs

Odpowiedz

Powiązane problemy