由网友(瞄准心脏.)分享简介：我读此链接：AngularJS从外部js函数并访问范围我试图让访问控制器，但我没有设置我的index.html像fiddlejs例子。 我安装我的应用程序使用$ routeProvider和设置一个简单的服务来分享一些应用数据。我希望能够控制器之间进行通信，并做到这一点使用该服务。我与我的路线之一运行到一个问题，但因为...

我读此链接：AngularJS从外部js函数并访问范围我试图让访问控制器，但我没有设置我的index.html像fiddlejs例子。

我安装我的应用程序使用$ routeProvider和设置一个简单的服务来分享一些应用数据。我希望能够控制器之间进行通信，并做到这一点使用该服务。我与我的路线之一运行到一个问题，但因为我希望能够从页面设置一些应用程序的数据服务。

该signin.html有一堆的JavaScript的使用JavaScript的一些部件，他们有回调，一旦他们完成。我试图调用从脚本中的LoginController我的方法，但我得到一个不确定的，因为我没有指定一个NG控制器控制器。有没有办法去从我signin.html脚本的LoginController中？

myapp.js

  VAR对myApp = angular.module（'对myApp'，['ngCookies'，'ngResource']，  功能（$ routeProvider，$ locationProvider，$ httpProvider）{ }）; myApp.service（'sharedPropertiesService'，函数（）{VAR isValidUser = FALSE;返回{    setValidUser：功能（userValid）{isValidUser = userValid;}，    isValidUser：函数（）{返回isValidUser;}，}; }）;myApp.controller（'的LoginController'，['$范围，$ HTTP，sharedPropertiesService'，   功能（$范围，$ HTTP，sharedPropertiesService）{      $ scope.test =函数（）{警报（'从HTML模板中调用。'）;};    } ]）。控制器（'的PageController'，['$范围，$位置，sharedPropertiesService'，      功能（$范围，$位置，sharedPropertiesService）{        如果（sharedPropertiesService.isValidUser（））{    $ location.path（'/ MyApp的'）;    }其他{    //让他们登录    $ location.path（'/登入/'）;    }}  ]）;myApp.config（['$ routeProvider'，函数（$ routeProvider）{    $ routeProvider。        当（'/'，{templateUrl：/home.html'，控制器：'的PageController'}）。        当（'/登入'，{templateUrl：/signin.html'，控制器：'SusiController'}）。        当（'/ MYAP'，{templateUrl：/myApp.html'，控制器：'的PageController'}）;}]）; 

index.html的

 ＆LT; HTML NG-应用=对myApp＆GT;  ＆LT; HEAD＆GT;     //负荷Angularjs，jQuery的，等等。  ＆LT; /头＆GT;  ＆LT;身体GT;     ＆LT; D​​IV ID ='的myapp'NG-视图NG-斗篷＆GT;＆LT; / DIV＆GT;  ＆LT; /身体GT;  ＆LT; / HTML＆GT; 

signin.html

 ＆LT; D​​IV ID =loginwidget＆GT;＆LT; D​​IV角色=主ID =内容＆GT;   ＆LT; D​​IV ID =签到＆GT;       ＆LT; / DIV＆GT;    ＆LT; D​​IV＆GT; ＆LT; D​​IV＆GT; ＆LT;脚本＆GT;     $。就绪（'loginwidget_main'，函数（）{          loginwidget.load（'登入'，函数（）{               完成：成功，               失败：失败          }）;      }）;     函数成功（）{            VAR范围= angular.element（$（'＃的myapp'））范围（）测试。;       警报（范围）; //这表明未定义       范围（）;     }     功能失效（）{警报（登录失败）;} ＆LT; / SCRIPT＆GT; 

解决方案

我从一个朋友帮助了它。这里是解决方案：

在signin.html文件中的ID添加到顶部的股利。在脚本code使用该ID去使用范围的jQuery（你不需要使用angular.element（））。

signin.html

 ＆LT; D​​IV ID =loginwidget＆GT;   ＆LT; D​​IV角色=主ID =内容＆GT;       ＆LT; D​​IV ID =签到＆GT;       ＆LT; / DIV＆GT;   ＆LT; D​​IV＆GT; ＆LT; D​​IV＆GT; ＆LT;脚本＆GT;    $。就绪（'loginwidget_main'，函数（）{      loginwidget.load（'登入'，函数（）{           完成：成功，           失败：失败      }）;  }）; 函数成功（）{        VAR范围= $（'＃loginwidget'）的范围（）。        scope.test（）; } 功能失效（）{警报（登录失败）;} ＆LT; / SCRIPT＆GT; 

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>

解决方案

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>