从Javascript调用AngularJS控制器

Question

I am loading views and scripts on client side. I am trying to achieve to load and call angularjs controller inside my javascript.

1. Load container view(v1.html), main script (eg. myscript.js) and angular.js
2. myscript.js will load view(v2.html) inside v1.html and angular controller(controller.js)
3. v2.html is as: <div id="v1_id" ng-app="loadApp" ng-controller="loadCtrl"> {{msg}} </div> .
4. controller.js is as:

 angular.module('loadApp', []).controller('loadCtrl', function($scope) { $scope.load_msg = function(_msg) { $scope.msg = _msg; } }); 

5. Call to controller within myscript.js : angular.element(document.getElementById('v1_id')).scope().load_msg('Hi')

And error I get is Uncaught TypeError: Cannot read property 'load_msg' of undefined .

Any thought on this, what I am missing here?

Many thanks.

Answer 1

You probably haven't wait for angular to have bootstrapped (compiled) your HTML, hence the scope is not available. Use angular.element(document).ready before running your javascript.

 angular.module('loadApp', []).controller('loadCtrl', function($scope) { $scope.load_msg = function(_msg) { $scope.msg = _msg; } }); // Wait for angular to be bootstraped angular.element(document).ready(function () { var scope = angular.element(document.getElementById('v1_id')).scope(); // Since we are outside of angular world, we need to $apply the scope scope.$apply(function() { scope.load_msg('Hi'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div id="v1_id" ng-app="loadApp" ng-controller="loadCtrl"> {{msg}} </div>