親のコントローラで角ディレクティブのスコープにアクセスできない

角のアプリケーションで作業中親コントローラにdireciveメソッドを呼び出す際に問題が発生しました。問題はプロファイルコントローラでloginディレクティブを使用していることです。プロファイルコントローラのスコープからlogin direciveのメソッドを呼び出したいとします。親のコントローラで角ディレクティブのスコープにアクセスできない

最初の問題は、$ scope.loginがここでは定義されていないため、コントローラーで$ scope.login.openLogin（false）を使用してloginディレクティブのメソッドを呼び出すことができません。しかし、同じコントローラ$ scope.login.openLogin（false）は、Ajax呼び出しの成功またはエラーメソッドのようなコールバックイベントでアクセス可能です。しかし、私はまだいくつかの時間は未定義と与えられているか分からないし、いくつかの時間は正常に動作します。これは私の主な問題は、いくつかの時間$ scope.loginは、

最初の問題は、プロファイルコントローラで$ scope.vmまたは$ scope.loginを取得できないということです。代わりに$ sope.vm.getData（）のような呼び出しメソッドを呼び出せません。代わりにthis.getDataのように呼び出す必要があります）.Why 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 
       */ 
      } 
     } 
    });

プロフィールログインディレクティブのコードですされていませんコントローラ（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) { 
});

出典

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

を行い、いくつかのコードです –

親のコントローラで角ディレクティブのスコープにアクセスできない

答えて

関連する問題