Angular 在父控制器中无法访问指令范围

Question

我正在开发 angular 应用程序我陷入了一个关于将指令方法调用到父控制器中的问题。问题是我在配置文件控制器上使用登录指令。我想从配置文件控制器的范围调用登录指令的方法。

第一个问题是我无法通过在控制器中使用 $scope.login.openLogin(false) 来调用登录指令的方法因为 $scope.login 在这里未定义。但是，在同一控制器中，$scope.login.openLogin(false) 可在回调事件中访问，例如 ajax 调用的成功或错误方法。但我不知道有些时间也未定义，有些时间工作正常。这是我的主要问题，无法找出为什么有时 $scope.login 可访问而有时不能访问。

第一个问题是我无法在配置文件中获得 $scope.vm 或 $scope.login controller.I 无法调用 $sope.vm.getData() 之类的方法，而我必须称它为 this.getData() 。为什么 this.getData() 可访问但 $scope.vm.getData() 不可访问它给出 null

登录指令代码如下

LoginDirective.cs

//Login diretive 
angular.module('EmailApp')
    .directive('login', function LoginDrctv() {
        'use strict';
        return {
            restrict: 'EA',
            replace: true,
            scope: false,
            templateUrl: "js/directives/template/login.tmpl.html",
            controllerAs: 'login',
           //bindToController: true,
            controller: function (LoginFactory, $scope, $rootScope, $location) {

                //THis method is to be call from parent controller (Profile Controller)
                this.openLogin = function (IsmakeCall) {
                    debugger;
                    this.loginOperation = "Login";
                    this.makeCall = IsmakeCall;   //true or false
                  //  $rootScope.islogin = true;
                    $scope.vm.mainPage = 'login';
                }
            },
            link: function (scope, element, attrs, ctrl) {
                /* 
                  by convention we do not $ prefix arguments to the link function
                  this is to be explicit that they have a fixed order
                */
            }
        }
    });

配置文件控制器（Profile.Js）

angular.module('EmailApp')
    .controller('ProfileCtrl', ['$rootScope', '$routeParams', 'DetailFactory', '$scope', '$location',
        function ProfileCtrl($rootScope, $routeParams, DetailFactory, $scope, $location) {

            'use strict';
            this.loading = true;
            this.mainPage = 'detail';
            this.back = function () {
                $location.path('home');
            }
           // $scope.login.openLogin(false)  this method is not accessible 
           //here but in call back function is works like below
            this.getData = function () {
                debugger;
                this.loading = true;
                DetailFactory.getDetailProfile().then(function (resp) {
                    $scope.vm.loading = false;
                    $scope.vm.userDetails = resp.data;
                    $scope.vm.userId = resp.data.appUser.UserID
                }, function (err) {
                    $scope.vm.loading = false;
                    if (err.status == 401) {
                        //Call method of login directive .It get called some 
                        //times but sometime $scope.login gives undefined
                        $scope.login.openLogin(false);
                    }
                });
            }
            this.getData();
        }]);

profile.html

angular.module('EmailApp', [
    'ngRoute',
    'ngSanitize',
    'angularFileUpload'
]).config(function ($routeProvider) {

    'use strict';
    $routeProvider
        .when('/profile', {
            templateUrl: 'view/profile.html?v=' + Math.random(),
            controller: 'ProfileCtrl',
            controllerAs: 'vm'
        })
        .when('/home', {
            templateUrl: 'view/PrivacyPolicy.html?v=' + Math.random(),
            controller: 'PrivacyCtrl',
            controllerAs: 'vm'
        })
        .otherwise({
            redirectTo: '/home'
        });
    }).run(function ($rootScope, $location) {
});

Answer 1

通常，父控制器不会对子控制器或指令进行函数调用。而是将值传递到指令 DOM 并在指令上添加 $watch 以了解该值何时更改。

这是一些执行 $watch

的代码

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <meta charset="utf-8">
    <title>Angular Callback</title>
    <style>
    .login {
      border: 1px solid black;
    }

    .login:not(.login--opened) .login-inner {
      display: none;
    }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script>
    var myApp = angular.module("myApp", []);

    myApp.controller('appController', function($scope) {
      $scope.loginIsOpen = false;

      $scope.openLogin = function() {
        $scope.loginIsOpen = true;
      }

    });


    myApp.controller('loginController', loginController);
    loginController.$inject = ['$scope'];
    function loginController($scope) {
      $scope.closeMe = function() {
        $scope.isOpen = false;
      }

      $scope.$watch('isOpen', function(newVal) {
        if (newVal === true) {
          console.log('The Login was opened');
        }
      });
    }

    myApp.directive('login', loginDirective );
    function loginDirective() {
      return {
        'restrict': 'E',
        'template': '<div class="login" ng-class="{\'login--opened\':isOpen}">Login Directive<div class="login-inner"><p>I am open</p><button ng-click="closeMe()">Close</button></div></div>',
        'controller': 'loginController',
        'scope': {
          isOpen: '='
        }
      };
    }
    </script>
  </head>
  <body ng-controller="appController">
    <button ng-click="openLogin()">Open Login</button>
    <hr/>
    <login is-open="loginIsOpen"></login>
  </body>
</html>

Angular 在父控制器中无法访问指令范围

Angular directive scope not accessible in parent controller

javascript

angularjs

angularjs-scope

angular-directive