コントローラの角度機能は実行できません

Question

私はAngularを初めて使用しており、Angularのui-bootstrapを使用してModal（ポップアップフォーム）を使用したいと考えています。私はAngular bootstrap siteから学んでいます。これは、ポップアップを制御するためにControllerAsを利用していることがわかります。

私が直面する問題は、CTRL内の関数であるが、私はすでにそれをより明確にするために正しい値にng-click='ctrl.open()'

を入れていても、ng-clickイベントで実行することができない、私は以下の私のコードを提供します。

Controller.jsでもconsole.log('selected');が発射されていない

'use strict'; 

function funcListEmployeeCtrl($scope) { 
    var ctrl = this; 
    ctrl.items = ['item1', 'item2', 'item3']; 
    ctrl.animationsEnabled = false; 
    console.log(ctrl); 
    ctrl.open = function (size, parentSelector) { 
     console.log('selected'); //this is not fired 
     var parentElem = parentSelector ? 
      angular.element($document[0].querySelector('.change-password-modal-container ' + parentSelector)) : undefined; 
    var modalInstance = $uibModal.open({ 
     animation: ctrl.animationsEnabled, 
     ariaLabelledBy: 'modal-title', 
     ariaDescribedBy: 'modal-body', 
     templateUrl: 'myModalContent.html', 
     controller: 'ModalInstanceCtrl', 
     controllerAs: 'ctrl', 
     size: size, 
     appendTo: parentElem, 
     resolve: { 
      items: function() { 
       return ctrl.items; 
      } 
     } 
    }); 
} 

angular.module('listEmployee') 
    .controller('listEmployeeCtrl', ['$scope', funcListEmployeeCtrl]) 
    .controller('ModalInstanceCtrl', function ($uibModalInstance, items) { 
     var ctrl = this; 
     ctrl.items = items; 
     ctrl.selected = { 
      item: $ctrl.items[0] 
     }; 

     ctrl.ok = function() { 
      $uibModalInstance.close($ctrl.selected.item); 
     }; 

     ctrl.cancel = function() { 
      $uibModalInstance.dismiss('cancel'); 
     }; 
}); 

注意。したがって、その機能はng-clickによってアクセス可能でないと結論付けることができる。

View.html

... 
<tbody> 
    <tr ng-repeat="emp in data.employees|orderBy:orderByField:reverseSort|filter:{ Name: search_value }"> 
     <td>{{emp.SalesmanId}}</td> 
     <td>{{emp.Name}}</td> 
     <td>{{emp.Address}}</td> 
     <td>{{emp.Phone}}</td> 
     <td>{{emp.Email}}</td> 
     <td ng-click='ctrl.open()'>{{emp.Username}}</td> 
     <td>{{emp.Role}}</td> 
    </tr> 
</tbody> 
... 

私は何をしようとしていますが、ユーザがユーザ名のセルをクリックするたびに、モーダル開いています。 $scopeの関数にng-clickを変更しようとしていて、HTMLが正常に動作しています。また、console.log(ctrl);に内容が表示されているので、ctrlオブジェクトが設定されていると確信しています。以下は、ログのスクリーンショットです。

私はデベロッパーツールはChromeから警告しまった注、私は（私は.min.jsなく.mapを使用）それを取り除く方法がわかりません。しかし、私はそれが問題だとは思わない。

どこが間違っているのか分かりません。どんな助けと指導も高く評価されます。

Answer 1

現在のコントローラをmodalControllerと混同しているようです。あなたはcontrollerAs: 'ctrl'をモーダルに宣言していますが、それは現在のコントローラでctrlを使用できるという意味ではありません。

コントローラには、listEmployeeCtrlとModalInstanceCtrlという2つのコントローラがあります。 2番目のコントローラ（ModalInstanceCtrl）のみがテンプレートにctrlを使用できます。

listEmployeeCtrlにctrlを使用する場合は、ng-controllerディレクティブをview.htmlに追加する必要があります。あなたはcontrollerAs構文を追加することができ、あなたのルートを記述

<div ng-controller="listEmployeeCtrl as ctrl"> 
    ... 
    <tbody> 
     <tr ng-repeat="emp in data.employees|orderBy:orderByField:reverseSort|filter:{ Name: search_value }"> 
      <td>{{emp.SalesmanId}}</td> 
      <td>{{emp.Name}}</td> 
      <td>{{emp.Address}}</td> 
      <td>{{emp.Phone}}</td> 
      <td>{{emp.Email}}</td> 
      <td ng-click='ctrl.open()'>{{emp.Username}}</td> 
      <td>{{emp.Role}}</td> 
     </tr> 
    </tbody> 
    ... 
</div> 

OR

は、おそらくそこ

.when('...', { 
    controller: 'listEmployeeCtrl', 
    templateUrl: '.../view.html' 
}) 

の線に沿って何かを持っている：あなたのサンプルコードを使用して

：

.when('...', { 
    controller: 'listEmployeeCtrl', 
    controllerAs: 'ctrl', 
    templateUrl: '.../view.html' 
}) 

Answer 2

あなたが開いているためには、モーダルIDを渡す必要がありますが、それはありません！

最新の質問

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 関連する問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.