1

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>
Community
  • 1
  • 1
9ers Rule
  • 164
  • 1
  • 1
  • 14

2 Answers2

2

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>
9ers Rule
  • 164
  • 1
  • 1
  • 14
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.

Anuj Panwar
  • 113
  • 7