Angularjs How do you call a controller method inside a javascript function defined in the html template file?

Question

I read this link: AngularJS access scope from outside js function and I tried to get access to the controller but I didn't setup my index.html like the fiddlejs example.

I setup my app to use the $routeProvider and setup a simple service to share some app data. I want to be able to communicate between controllers and do that using the service. I am running into a problem though with one of my routes because I want to be able to set some app data from the page to the service.

The signin.html has a bunch of javascript that uses some javascript widgets and they have callbacks once they complete. I am trying to call a method in my LoginController from the scripts but I get an undefined because I don't specify the controller with a ng-controller. Is there a way to get to the LoginController from the scripts in my signin.html?

myapp.js

var myApp = angular.module('myApp', ['ngCookies', 'ngResource'],
  function ($routeProvider, $locationProvider, $httpProvider) {
 }); 
 myApp.service('sharedPropertiesService', function () {

var isValidUser = false; 

return {
    setValidUser: function (userValid) { isValidUser = userValid;}, 
    isValidUser: function () {return isValidUser;},
};
 });

myApp.controller('loginController', ['$scope', '$http', 'sharedPropertiesService',
   function ($scope, $http, sharedPropertiesService) {
      $scope.test = function() {alert('called from inside the html template.');};           
    }
 ]).controller('PageController', ['$scope', '$location', 'sharedPropertiesService',
      function ($scope, $location, sharedPropertiesService) {

        if (sharedPropertiesService.isValidUser()) {
    $location.path('/myapp');
    } else {
    // Have them login
    $location.path('/signin/');
    }   
}
  ]);

myApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/', {templateUrl: '/home.html', controller: 'PageController'}).
        when('/signin', {templateUrl: '/signin.html', controller: 'SusiController'}).
        when('/myap', {templateUrl: '/myApp.html', controller: 'PageController'});
}]);

index.html

  <html ng-app="myApp">
  <head>
     // load Angularjs, jquery, etc.
  </head>
  <body>
     <div id='myapp' ng-view ng-cloak></div>
  </body>
  </html>

signin.html

 <div id="loginwidget">
<div role="main" id="content" >
   <div id="signIn" >
       </div>
    <div>
 <div>

 <script>
     $.ready('loginwidget_main', function () { 
          loginwidget.load('signin', function () {
               done : success,
               fail : fail  
          });
      });

     function success() {
            var scope = angular.element($('#myapp')).scope().test;
       alert(scope); // this shows undefined
       scope();
     }

     function fail() {alert("failed to login");}

 </script>

Can you try and match the case for myApp in the module definition and html ng-app tag. — Chandermani, Commented Jun 20, 2013 at 4:52
That is a typo when I was posting the code, I changed the app name to protect the innocent. — 9ers Rule, Commented Jun 20, 2013 at 16:31

9ers Rule · Accepted Answer · 2013-06-20 17:22:00Z

I figured it out with help from a friend. Here is the solution:

in the signin.html file add an id to the div at the top. In the script code use that id to get to the scope using jquery (you don't need to use the angular.element()).

signin.html

<div id="loginwidget">
   <div role="main" id="content" >
       <div id="signIn" >
       </div>
   <div>
 <div>

 <script>
    $.ready('loginwidget_main', function () { 
      loginwidget.load('signin', function () {
           done : success,
           fail : fail  
      });
  });

 function success() {
        var scope = $('#loginwidget').scope();
        scope.test();
 }

 function fail() {alert("failed to login");}

 </script>

Anuj Panwar · Accepted Answer · 2016-08-30 11:12:33Z

0

You can check below code snippet here we are calling the loginwidget scope function in javascript function.

<div id="parentController" ng-controller="parentController">
    <div id='myapp' ng-view ng-cloak></div>
</div>

function myFunction(){
      angular.element(document.getElementById('parentController')).scope().myFunction();
}

Note: Here you need to define your function in parentController.

answered Aug 30, 2016 at 11:12

Anuj Panwar

1137 bronze badges

Add a comment |

Collectives™ on Stack Overflow

Angularjs How do you call a controller method inside a javascript function defined in the html template file?

2 Answers 2

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Linked

Related