Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to bind data in title element using angular.js

I'm learning Angular.js and I set <title>{{title}}</title> and I try to change that using select element

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

I try ng-change and ng-select with set()

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

THe function don't work, but it work when I just set it without a function.

I also try to create change directive:

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

but this too don't work. Console.log don't execute at all.

like image 324
jcubic Avatar asked Aug 09 '13 20:08

jcubic


People also ask

How can you bind an element to data in AngularJS?

AngularJS creates a two way data-binding between the select element and the $ctrl. orderProp model. $ctrl. orderProp is then used as the input for the orderBy filter.

How create data-binding in AngularJS explain with example?

Two-way Binding When data in the model changes, the view reflects the change, and when data in the view changes, the model is updated as well. This happens immediately and automatically, which makes sure that the model and the view is updated at all times.

Does AngularJS use one-way data-binding?

One-way data binding in AngularJS means binding data from Model to View (Data flows from the scope/controller to the view). 'ng-bind' is an angular directive used for achieving one-way data binding.

What kind of data-binding does AngularJS support?

AngularJs support one-way binding as well as two-way binding. Most templating systems work with one-way databinding. They merge the model component and template together into a view. When the merge occurrs, the model data is bound to the view.


2 Answers

When dealing with the title tag you should use ng-bind-template so you don't see the expression in its raw state {{someVar}} before Angular has a chance to kick in. You can add the initial text of the title within the title tag and it will be overwritten by your template.

<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>
like image 148
CSharp Avatar answered Sep 19 '22 03:09

CSharp


Use $rootScope

.when('/', {
   templateUrl: '/templates/page/home.html',
   controller: ['$scope','$rootScope', function ($scope,$rootScope) {
      $rootScope.title = 'Учитель24.рф';
 }]});
like image 25
Mike Bazhenov Avatar answered Sep 19 '22 03:09

Mike Bazhenov