1

このリンクを読みました: AngularJS access scope from outside js functionとコントローラーへのアクセスを取得しようとしましたが、fiddlejs の例のように index.html をセットアップしませんでした。

$routeProvider を使用するようにアプリをセットアップし、いくつかのアプリ データを共有するための簡単なサービスをセットアップします。コントローラー間で通信し、サービスを使用して通信できるようにしたいと考えています。ページからサービスにアプリデータを設定できるようにしたいので、ルートの1つで問題が発生しています。

signin.html には、いくつかの JavaScript ウィジェットを使用する一連の JavaScript があり、完了するとコールバックがあります。スクリプトから LoginController のメソッドを呼び出そうとしていますが、ng-controller でコントローラーを指定していないため、未定義になります。私のsignin.htmlのスクリプトからLoginControllerにアクセスする方法はありますか?

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>
4

2 に答える 2

2

友人の助けを借りてそれを理解しました。解決策は次のとおりです。

signin.html ファイルで、上部の div に id を追加します。スクリプト コードでは、その ID を使用して、jquery を使用してスコープにアクセスします (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>
于 2013-06-20T17:22:00.287 に答える
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();
}

注: ここでは、parentController で関数を定義する必要があります。

于 2016-08-30T11:12:33.467 に答える