Geek asks and answers

How to tell AngularJS that I cheated on it using jQuery?

I crack the admin interface using the pre-fab template. An already built navigation system uses jQuery to load content into a tag through AJAX based window.location.hash.

If I extract this cut off via an AJAX call, then paste it into the DOM:

<div ng-app="myApp">
    {{ 2 + 2 }}
</div>

AngularJS does not know that I updated the DOM. The content that I see is literal {{ 2 + 2 }}. If I reload the page, the expression evaluates and I see the desired value 4.

How can I ask AngularJS to evaluate the content that I so cruelly forced into the DOM using non-angular methods?

Here's the script: http://jsfiddle.net/4zRTH/

EDIT

The answer from @tasseKATT is great for simple expressions, but I'm having problems accessing the controller. I have NotesControllerone that needs to access the code that I import. Something else along the lines:

<div ng-controller="NotesController">
    {{ notes.length }}
</div>

I updated the fiddle to fit a bit more with what I want to do: http://jsfiddle.net/5Xhs9/4/

+3
source share
3 answers

You need to use $apply:

$ apply () is used to execute an expression in angular from outside angular. (For example, from browser events DOM, setTimeout, XHR or third-party libraries). Because we call the angular structure, we need to execute the correct life cycle handling exceptions, running hours.

, , , :

1) :

var dynamicContent = "<div id='someId' ng-app> {{ 2 + 2 }} </div>";
$('.expression').html(dynamicContent);

var element = angular.element(document.querySelector('#someId'));

2) :

angular.bootstrap(element, []);

3) :

var elementScope = element.scope();

4) $apply:

elementScope.$apply();

: http://jsfiddle.net/5Xhs9/

:

ng-app"myApp" div, AngularJS , :

<div id='notes' ng-controller='NotesController'> {{ notes.length }} </div>

NotesController . :

1) $injector:

var $injector = angular.element(document.querySelector('.container')).injector();

2) $injector, scope. $apply:

var element = angular.element(document.querySelector('#notes'));

$injector.invoke(function($compile) {
  var scope = element.scope();
  $compile(element)(scope);
  scope.$apply();
});

: http://plnkr.co/edit/P6VwLee6AUWO7aDT601m?p=preview

+4

, $compile $rootScope app.run window: http://plnkr.co/edit/pxGhof1zD0rZknagfmyc?p=preview

window.compileForAngular = null;
window.rootScope = null;

var app = angular.module('jQuery', []);
app.run(function ($compile, $rootScope) {
    window.rootScope = $rootScope;
    window.compileForAngular = $compile;
    doNotTryThisAtHome();
});

function doNotTryThisAtHome() {
    // let just pretend that this came in over an AJAX request
var dynamicContent = "<div> {{ 2 + 2 }} </div>";

// I insert it into the DOM via jQuery
$('.expression').html(window.compileForAngular(dynamicContent)(window.rootScope));

}
+3

http://jsfiddle.net/QC97L/2/

See the above script

// Code goes here
jQuery(document).ready(function () {
// let just pretend that this came in over an AJAX request
var dynamicContent = "<div id='mainApp' > {{ 2 + 2 }}  </div>";

// I insert it into the DOM via jQuery
$('.expression').html(dynamicContent);





  var app = angular.module('myApp',[])
   angular.bootstrap('#mainApp',['myApp']);

// now how do I get AngularJS to evalulate the expression?

});
0
source

More articles:


All Articles