调用javascript函数中在指令中定义的控制器中的方法

Question

我正在寻找一种方法来调用在全局函数的指令中定义的控制器中的方法。我能够成功地做到这一点，在模块中定义控制器，并在普通html元素中使用ng控制器声明控制器。然后，我从javascript函数获得控制器和作用域，如下所示：

function signinCallback(authResult) {
    var googleLoginControllerElement = document.getElementById('googlelogin');
    var ctrlScope = angular.element(googleLoginControllerElement).scope();
    var controller = angular.element(googleLoginControllerElement).controller();

    ctrlScope.$apply(function() {
        controller.signinCallBack(authResult);
    });
}

但是，当我将控制器的定义移到指令的定义时，我无法找到这样做的方法(将控制器定义移动到指令后的新代码)：

var googleLogin = angular.module('GoogleLogin', []);

googleLogin.directive('googleLogin', function() {
    return {

    restrict: 'E',
    controller: function() {
    // Initialize google login api
    (function() {
        var po = document.createElement('script'); 
        po.type = 'text/javascript';
        po.async = true;
        po.src = 'https://apis.google.com/js/client:plusone.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(po, s);
     })();

         /*
         * 1: not logged in.
         * 2: logged in.
         * 3: login failed.
         * 4: logout failed.
         */
         this.state = 1;

         this.signinCallBack = function(authResult) {
         if (authResult['status']['signed_in']) {
             console.log('authResult: ' + JSON.stringify(authResult));
             this.state = 2;
         } else if (authResult.error === "user_signed_out") {
             console.log('Sign-in state: ' + authResult['error']);
                 this.state = 1;
         }
        };

        this.logout = function() {
            try {
                gapi.auth.signOut();
                this.state = 1;
             } catch(e) {
                 this.state = 4;
             }
        };

        this.isLoggedIn = function() {
            return this.state == 2;
        };
    },
    controllerAs: 'googleLoginCtrl',
    templateUrl: '../templates/google_login.html'
};
});

在我的html中，我使用了如下指令：

<google-login></google-login>

谢谢!

Answer 1

您需要指定指令必须使用的范围。

请参阅以下文档：https://docs.angularjs.org/guide/directive

**编辑：**

我给了你的元素一个id，这样我就可以访问它。

<google-login id="mybtn"></google-login>

&更改了您的全局功能。

function signinCallback(authResult) {
//  alert('I came here also inside callback global');

  var googleLoginControllerElement = document.getElementById('mybtn');
  var ctrlScope = angular.element(googleLoginControllerElement).scope();

 ctrlScope.$apply(function() {
      ctrlScope.googleLoginCtrl.signinCallBack(authResult);
     });

  //      ctrlScope.googleLoginCtrl.signinCallBack(authResult);
  //alert('I came here also inside callback global end');

}

我正在尝试ctrlScope.controller，但监督给它起了一个名字。

Answer 2

您可以尝试这样的方法(我不确定它是否有效，请告诉我)：

window.globalSigninCallBack = this.signinCallBack;

在您的指令中：

googleLogin.directive('googleLogin', function() {
    return {

    restrict: 'E',
    controller: function() {
    // Initialize google login api
    (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/client:plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
        })();

         /*
         * 1: not logged in.
         * 2: logged in.
         * 3: login failed.
         * 4: logout failed.
         */
         this.state = 1;

         this.signinCallBack = function(authResult) {
         if (authResult['status']['signed_in']) {
             console.log('authResult: ' + JSON.stringify(authResult));
             this.state = 2;
         } else if (authResult.error === "user_signed_out") {
             console.log('Sign-in state: ' + authResult['error']);
                 this.state = 1;
         }
        };

        window.globalSigninCallBack = this.signinCallBack;

        this.logout = function() {
            try {
                gapi.auth.signOut();
                this.state = 1;
             } catch(e) {
                 this.state = 4;
             }
        };

        this.isLoggedIn = function() {
            return this.state == 2;
        };
    },
    controllerAs: 'googleLoginCtrl',
    templateUrl: '../templates/google_login.html'
};
});

然后在后面的代码调用中：

window.globalSigninCallBack(authResult);

但是这是非常麻烦的解决方法，我永远不会在我的代码中使用这个：)