상위 컨트롤러에서 각도 지시문 범위에 액세스 할 수 없습니다.

각도 응용 프로그램에서 작업하고 있습니다. 부모 컨트롤러에 direcive 메서드를 호출하는 것과 관련된 문제가 있습니다. 프로필 컨트롤러에서 login 지시문을 사용하고 있습니다. profile 컨트롤러의 범위에서 login direcive의 메소드를 호출하려고합니다.상위 컨트롤러에서 각도 지시문 범위에 액세스 할 수 없습니다.

첫 번째 문제는 $ scope.login이 여기에 정의되지 않았기 때문에 컨트롤러에서 $ scope.login.openLogin (false)을 사용하여 로그인 지시문의 메서드를 호출 할 수 없다는 것입니다. 그러나 동일한 컨트롤러 $ scope.login.openLogin (false)은 Ajax 호출의 성공 또는 오류 메서드와 같은 콜백 이벤트에서 액세스 할 수 있습니다. 그러나 나는 어떤 시간도 정의되지 않았고 잘 작동하는 것을 알지 못합니다. 이것은 왜 내 시간에 $ scope.login에 액세스 할 수 있고 시간이 부족한 지 알 수없는 주요 문제입니다.

첫 번째 문제는 프로필 컨트롤러에서 $ scope.vm 또는 $ scope.login을 얻을 수 없다는 것입니다. 대신 $ sope.vm.getData()와 같은 메소드를 호출 할 수 없습니다. 대신 this.getData와 같이 호출해야합니다.) 왜 라니 this.getData는() 액세스 할 수 있지만 $ scope.vm.getData은()에 액세스 할 수 없습니다 그것은 로그인 지침의 코드

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 
       */ 
      } 
     } 
    });

프로필되고 다음 널 (null)

을 제공합니다 컨트롤러 (프로필 .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) { 
});

출처

2017-11-07 tajinder singh

아이 컨트롤러 또는 지시에 함수를 호출하지 않습니다. 대신 지시문 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>

출처

2017-11-07 18:52:10 Intervalia

예 오른쪽, 지침에서 부모 함수를 사용있어 아이디어 –

상위 컨트롤러에서 각도 지시문 범위에 액세스 할 수 없습니다.

답변

관련 문제