AngularJSはコントローラのメソッド内でディレクティブを呼び出せません

Question

私はハイブリッドIonic1アプリケーションで作業していますが、ディレクティブ内からコントローラメソッドを呼び出すことができません。 問題は、ディレクティブ内でコントローラの変数（変数appsなど）を渡すことができますが、removeCredentials()をcard-appディレクティブに呼び出すことができないことです。

私はそれを動作させるために多くの方法を試しましたが、どれも問題を解決しませんでした。また、&を使用してディレクティブ内のコントローラメソッドをバインドしようとしましたが、ディレクティブテンプレートのXアイコンをクリックすると何もトリガされません。

は今のコードは次のようになります。apps.jsに

コントローラAppsCtrl inclusions.jsで

angular.module('testprofile') 
.controller('AppsCtrl', function($scope, $state, $log, $ionicHistory, $filter, $ionicPopup, UserData, CredentialStoreService, ionicMaterialMotion, ionicMaterialInk, Auth, Effects, CredentialStoreService, Globals, Validations) { 

$scope.onlyMyApps = true; 
$scope.showNoItems = false; 

var translate = $filter('translate'); 

$scope.apps = []; 

$scope.mapAppsFromCredentials = function(credentials) { 

    var map = credentials.map(function(cred) { 
     /* app: "App 1" 
      appId: 7 
      profile: "Default Profile" 
      profileId: 0 
     */ 
     var app = UserData.getLocalApp(cred.app); 
     if (!app) { 
      $log.debug("apps.js::mapAppsFromCredentials - no local app matching credentials: "+JSON.stringify(cred)); 
      return null; 
     } 

     var curHelper = UserData.getCurrentAppHelper(app); 
     return { 
      used: Boolean(cred.used), 
      id: app.id, 
      title: app.nameApp, 
      profile: cred.profile, 
      desc: curHelper ? curHelper.name : 'NO HELPER' 

     }; 
    }) 


    return map; 

} 

$scope.refresh = function() { 
    $log.debug("apps.js::AppsCtrl - REQUEST CREDENTIAL LIST..."); 
    CredentialStoreService.getCredentialList(
     //ON SUCCESS 
     function(response) { 
      $log.debug("apps.js::AppsCtrl - ...CREDENTIAL LIST RESPONSE: " + JSON.stringify(response)); 
      $scope.apps = $scope.mapAppsFromCredentials(response); 
      Effects.init(); 
      $scope.showNoItems = true; 
      for (var i = 0; i < $scope.apps.length; i++) { 
       if ($scope.apps[i].used) { 
        $scope.showNoItems = false; 
        break; 
       } 
      } 
     }, 

     //ON ERROR 
     function() { 
      $log.debug("apps.js::AppsCtrl - ...CREDENTIAL LIST ERROR"); 
     } 
    ) 
} 

$scope.$on("$ionicView.enter", function() { 
    $log.debug("apps.js::$ionicView.enter - ENTER"); 
    $scope.refresh(); 
}); 

//REMOVE CREDENTIALS 
$scope.removeCredentials = function() { 

    $log.debug("app-details.js::removeCredential CONFIRMATION..."); 
    $ionicPopup.confirm({ 
     title: translate('Remove Credentials'), 
     template: translate('Are you sure you want to delete current credentials') + ' ' + app.nameApp + '?', 
     cancelText: translate('No'), // String (default: 'Cancel'). The text of the Cancel button. 
     //cancelType: '', // String (default: 'button-default'). The type of the Cancel button. 
     okText: translate('Yes'), // String (default: 'OK'). The text of the OK button. 
     okType: 'button-energized-900' // String (default: 'button-positive'). The type of the OK button. 
    }).then(function(res) { 
     if(res) { 
      $log.debug("app-details.js::removeCredential CONFIRMED!"); 
      Auth.askPIN(true) 
       .then(function() { 
        CredentialStoreService 
         .removeCredential(
             //authenticationProfileName 
             UserData.getAuthProfile(app).name, 
             //appProfileName 
             app.name, 
             // ON SUCCESS 
             onRemovedCredential, 
             // ON ERROR 
             Globals.onError); 

       }); 




     } else { 
      $log.debug("app-details.js::removeCredential REJECTED."); 
     } 
    }); 
}; 

var onRemovedCredential = function() { 
    $log.debug("app-details.js::removeCredential CREDENTIALS REMOVED!"); 
    Effects.showToast(translate('CREDENTIALS REMOVED')+'.'); 
    $ionicHistory.nextViewOptions({ 
     disableBack: true 
     }); 
    $state.go('menu.apps', {}, {reload:true}); 
}; 

}) 

ディレクティブを

angular.module('testprofile') 

.directive('cardProfile', function() { 
    return { 
    scope: { 
     data:"=cardSource" 
    }, 
    restrict: 'E', 
    templateUrl: 'app/templates/card-profile.html' 
    }; 
}) 


.directive('cardApp', function() { 
    return { 
    scope: { 
     data:"=cardSource", 
    }, 
    restrict: 'E', 
    templateUrl: 'app/templates/card-app.html', 
    controller: 'AppsCtrl', 
    controllerAs: "ac", 
    bindToController: true, 
    link: function(scope, element, attrs, ctrl) { 
     scope.removeCredentials = function() { 
      return scope.ac.removeCredentials(); 
     }; 
    } 
    }; 
}) 


.directive('pinRequired', function(Auth) { 
    return { 
    restrict: 'A', 
    link: function(scope, element, attrs, ctrl) { 

     attrs.authorized = false; 

     element.on('click', function(e){ 
     // console.log("\t\t + attrs.authorized:"+attrs.authorized); 
     if (attrs.authorized) { 
      if (attrs.href) location.href = attrs.href; 
      return true; 

     } else { 


      e.preventDefault(); 
      e.stopPropagation(); 

      Auth.askPIN(true) 
      .then(function() { 
       // console.log("inclusions.js::pinRequired - askPin - AUTHORIZED"); 
       //THE PIN IS CORRECT! 
       attrs.authorized = true; 
       element.triggerHandler('click'); 
       attrs.authorized = false; 
      }); 
     } 
     }); 
    } 
    }; 
}) 

; 

apps.html

<ion-view view-title="Apps"> 
    <ion-content padding="true" class="has-header bg-stable"> 


    <h4 class="list-title"><i class="material-icons">&#xE8CA;</i> {{ 'App List' | translate }} 

     <!--label class="toggle toggle-calm pull-right toggle-small"> 
      <span class="toggle-label" translate>My Apps</span> 
      <input type="checkbox" ng-model="onlyMyApps"> 
      <div class="track"> 
       <div class="handle"></div> 
      </div> 
     </label--> 
    </h4> 

    <ion-list class=""> 
     <card-app  ng-repeat="app in apps | filter:(onlyMyApps || '') && {used: true}" 
        card-source="app" 
        class="{{app.used ? 'used' : 'unused'}}"></card-app> 

     <div class="item padding" ng-show="showNoItems"><p class="text-center">{{ 'No saved credentials' | translate}}</span>.</p> 
     </div> 


    </ion-list> 
    </ion-content> 
</ion-view> 

カードapp.html

<ion-item 
       menu-close="" 
       class="card item-thumbnail-left item-icon-right app-item"> 
    <!--<img ng-src="{{data.thumb}}">--> 
       <span style="line-height:70px;vertical-align:middle" class="item-image avatar-initials h2">{{data.title|initials}}</span> 
       <div class="item"> 
        <h2 class="inline-block"> 
         <span ng-bind="data.title"></span> 
        </h2> 
        <span class="icon-right material-icons" ng-click='removeCredentials()'>&#xE888;</span> 
        <div> 
         <span>{{'Active helper' | translate}}</span> 
         <h3>{{ data.desc | translate }}</h3> 
        </div> 
       </div> 
</ion-item> 

ソリューション：あなたのディレクティブた場合、私は私のCSSでadd pointer-events: auto;とcursor: pointer;に

Answer 1

を持っていたので、最後にクリックイベントがトリガされませんでした親コントローラーからただ一つの関数を呼び出す必要があります（試したように）パラメータとして渡してください。

まず、コントローラスコープがディレクティブに使用できることを確認します。たとえば、簡単な方法を作成し、ディレクティブの前にそれを呼び出す：

// to ensure scope is ok 
<button ng-click="alertMethod()"></button> 

<card-app ng-repeat='' card-source='' class='' my-method="alertMethod()"></card-app> 

// directive 
// 
scope: { 
    myMethod: '&' 
}, 
template: "<button ng-click='myMethod()'>Click</button>" 

が動作するはずですが、あなたのコントローラのスコープが利用できない場合多分あなたは名前のコントローラを使用する必要があります使用し

https://docs.angularjs.org/api/ng/directive/ngController

をcontroller asは、複数のコントローラが要素に適用されているときに、テンプレート内でどのコントローラにアクセスしているのかを明確にします。

あなたのコードに比べて

：

// controller 
this.alertMethod = function() {   
    alert('Hello'); 
} 

// view 
<div ng-app="myApp" ng-controller="testCtrl as ctrl"> 
<card-app ng-repeat='' card-source='' class='' my-method="ctrl.alertMethod()"></card-app>