从HTML标签初始化AngularJS模型

Question

I'm working with django + angular. I'd like django to populate a value in the HTML template, and then tell Angular to use that value as initial value for a model.

I need this for two reasons:

1. Simplicity - The page deos not currently use Angular, and I believe it would be easier to upgrade this way.
2. SEO - Some search engines can't read values populated in the DOM through Angular. I know there are several solutions for SEO with Angular but I hope there's an easier way?

Any help would be greatly appreciated :)

Answer 1

You can initialize you model based on that initial HTMl value.

For instance your HTML would be:

<div ng-bind="value">initialValue</div>

And you controller:

var elem = $( 'get the element' );
$scope.value = elem.text();

Angular will then take over and can reflect any change made to $scope.value .

The downside is that you need to grab the element (using jQuery here for simplicity but you can use vanilla Javascript).

One way to work around that would be a custom directive:

<div late-binding="value">initialValue</div>

I let the directive code as an exercice to the reader, unless you need help for it :)