Question

I’ve a question about Angularjs data binding feature.

If i write:

<div>Hello {{name}}!</div>

and i’ve in the controller.js something like:

$scope.name = 'Bruno';

The result will be “Hello Bruno!”… and this is wonderful! Now i edited the template:

<div>Hello <span id="name"></span>!</div>

and i also added this javascript function just before close the body:

<script src="lib/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>

<script type="text/javascript">

  function fillName(subject) {
    $("#name").text("Hello " + subject);
  }

  fillName({{name}}); // this throws "SyntaxError: invalid property id"

</script>
</body>

---

So my question is:

Is it possible in AngularJS to use data bindings inside a classic javascript function?

---

UPDATE:

// i changed: fillName({{name}}); with:
fillName('{{name}}');

and this solved the error… but still the name doesn’t appear… i’m still working on this…

suggestions always welcome!

Answer 1

[Update] Well, it appears that I misunderstood your question, as you seem to have solved your issue, but perhaps other people will stumble upon this information based on the title of the question.

---

I will prefix my answer with the following caveat: if you’re writing an AngularJS application, you’ll want to use the features Angular provides, like directives, for doing this kind of stuff, rather than going outside the Angular application lifecycle and writing global functions, etc. In the interest of the academic answer to the question, however, here it is.

Overview

The Angluar magic that you’re trying to get access to here is based on a few facilities:

Scope (docs)

Scopes provide a context for Angular expressions (the things you put in attributes and the double curlies) and provide the functions necessary to watch for changes in the evaluation of these expressions in that context. For example, Scope#$watch allows you to register a callback that is executed whenever the evaluation of an expression changes.

$interpolate (docs)

Interpolate takes a string that can include expressions inside double curlies and turns it into a new string with the expression results interpolated into the original string. (Calling $interpolate(str) returns a function which, when called against an object that provides scope, returns a string.)

Putting it Together

When writing an Angular app, you often don’t have to worry about these details–your controllers automatically get passed a scope, and your DOM text is automatically interpolated. Since you’re trying to access these things outside of the lifecycle of an Angular app, you’ll have to jump through some of these previously hidden hoops.

angular.injector (docs)

When you register services, filters, directives, etc. on a module using app.controller, app.factory, and so forth, the functions you provide are invoked by the injector. Angular creates one for you in an Angular app, but since we’re not using one, you’ll need to use angular.injector to create one yourself.

Once you have an injector, you can use injector.invoke(fn) to execute the function fn and inject any dependencies (like $interpolate) for use inside the function.

A simple example

Here’s a very basic example that

• Provides two-way data binding between an input and a variable
• Provides data binding into an HTML view using $interpolate

Name: <input id="name" type="text" autocomplete="off">
<button id="setname">Set name to Bob</button>
<div id="greeting"></div>

var injector = angular.injector(['ng']);

injector.invoke(function($rootScope, $interpolate) {
  var scope = $rootScope.$new();
  var makeGreeting = $interpolate("Hello {{name}}!");

  scope.$watch('name', function() {
    var str = makeGreeting(scope);
    $("#greeting").text(str);
    $("#name").val(scope.name);
  });

  var handleInputChange = function() {
    scope.$apply(function() {
      scope.name = $('#name').val();
    });
  };

  var setNameToBob = function() {
    scope.$apply(function() {
      scope.name = "Bob";
    });
  };

  $("#name").on('keyup', handleInputChange);
  $("#setname").on('click', setNameToBob);
  handleInputChange();
});

Here is a jsFiddle that demonstrates the technique: http://jsfiddle.net/BinaryMuse/fTZu6/