come associare i dati in elemento titolo utilizzando angular.js

sto imparando Angular.js e ho impostato <title>{{title}}</title> e cerco di cambiare la situazione utilizzando select elementocome associare i dati in elemento titolo utilizzando angular.js

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

provo ng-change e ng-select con set()

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

La funzione non funziona, ma funziona quando l'ho appena impostata senza una funzione.

Cerco anche di creare direttiva cambiamento:

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

ma anche questo non funzionano. Console.log non viene eseguito affatto.

fonte

2013-08-09 jcubic

Partenza risposta di CSharp http://stackoverflow.com/a/24921980/243034 Essa permetterà il vostro sito web da indicizzare correttamente e la visualizzazione nei risultati di ricerca con una corretta impostazione predefinita, piuttosto che apparire come {{applicazione .title}} (o qualsiasi altra cosa tu scelga.) – Calebj

Tutto dovrebbe funzionare bene, senza codice aggiuntivo:

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

E questo è tutto. Here is a pen.

fonte

2013-08-09 20:57:49 madhead

No, questa è una politica di codepen. Non mostra il titolo attuale quando la penna viene caricata in iframe (e il titolo viene aggiunto come primo figlio al corpo). Scava ad esso con gli strumenti di sviluppo e vedi che sta cambiando, o prova il tuo esempio. (Io uso yeoman con generatore angolare per test rapidi). – madhead

Poiché @madhead ti ha dato una risposta fantastica, voglio solo far luce sulla tua domanda sul perché il tuo codice non funziona.

Si può sicuramente usare ng-change, si prega di dare un'occhiata a questo codice. Il tuo approccio è molto vicino e immagino che ti sia sfuggito qualcosa?

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

voglio sottolineare una cosa. Se si esegue il test in jsfiddle, non utilizzare <title>{{title}}</title>, utilizzare invece <div>{{title}}</div>. In qualche modo titolo tag non verrà mostrato correttamente nella finestra di demo.

Demo

fonte

2013-08-09 21:35:24 zsong

Ho esattamente la stessa cosa ma ho impostato ng-app e ng-controller su un oggetto html. Se imposto '$ scope.title' in controler la modifica del titolo, ma non se la metto in una funzione. – jcubic

'ng-app' può essere impostato in' ',' ng-controller' dovrebbe andare con '' Suppongo, per favore prova. – zsong

Sia jsFiddle che Codepen caricano i risultati in iframe, quindi la sezione '' non può essere testata correttamente con questi awesome. – madhead

Usa $ rootScope

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

fonte

2014-03-03 07:31:03

ho capito una soluzione per impostare il titolo in <title> tag.

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>

fonte

2014-04-11 07:26:47 PythonDev

Quando si tratta con il tag titolo che si dovrebbe usare ng-bind-template in modo da non vedere l'espressione nella sua stato grezzo {{someVar}} prima che Angular abbia la possibilità di entrare. È possibile aggiungere il testo iniziale del titolo all'interno del tag del titolo e questo verrà sovrascritto dal modello.

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

fonte

2014-07-23 22:15:36 CSharp

Inoltre ho dovuto aggiungere l'attributo '' all'elemento 'head' per farlo funzionare. – PyreneesJim

come associare i dati in elemento titolo utilizzando angular.js

risposta

Problemi correlati