Angular - Funktion in ControllerAs kann nicht ausgeführt werden

Question

Ich bin neu in Angular und möchte Modal (Popup - Formular) verwenden ui-bootstrap von Angular. Ich lerne von Angular bootstrap site. Es kann gesehen werden, dass es ControllerAs verwendet, um das Popup zu steuern.

Das Problem, das ich Gesicht ist die Funktion in der Abfrage nicht in ng-click Ereignisse ausgeführt werden kann, auch wenn ich schon den richtigen Wert setzte ng-click='ctrl.open()'

Um es deutlicher zu machen, habe ich meinen Code unten bieten.

Controller.js

'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'); 
     }; 
}); 

Beachten Sie, dass auch die console.log('selected'); nicht ausgelöst wird. Daraus kann geschlossen werden, dass die Funktion nicht unter ng-click erreichbar ist.

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> 
... 

Was ich versuche, ist offen ein modaler zu tun, wenn der Benutzer Benutzername Zelle klickt. Der HTML-Code funktioniert gut, weil ich versucht habe, zu einer Funktion in $scope zu ändern und es funktioniert. Auch die console.log(ctrl); zeigt den Inhalt, also bin ich mir sicher, dass das ctrl-Objekt gesetzt ist. Im Folgenden stelle ich den Screenshot des Protokolls zur Verfügung.

Bitte beachte, dass ich DevTools von Chrome Warnung bekam, kann ich nicht sicher, wie es loszuwerden (ich benutze .min.js und nicht .map). Ich glaube jedoch nicht, dass das das Problem ist.

Ich bin mir nicht sicher, wo ich falsch gelaufen bin. Irgendwelche Hilfe und Führung würden geschätzt.

Answer 1

Sie scheinen Ihren aktuellen Controller mit dem ModalController zu verwechseln. Sie deklarieren controllerAs: 'ctrl' für Sie modal, aber das bedeutet nicht, dass Sie ctrl in Ihrem aktuellen Controller verwenden können.

Sie haben zwei Controller, listEmployeeCtrl und ModalInstanceCtrl. Nur der zweite Controller (ModalInstanceCtrl) kann in seiner Vorlage ctrl verwenden. Wenn Sie ctrl auch für listEmployeeCtrl verwenden möchten, müssen Sie die Anweisung ng-controller zur View.html hinzufügen.

Arbeiten mit dem Beispielcode:

<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> 

ODER

, wo Sie Ihre Route, die Sie wahrscheinlich etwas entlang der Linien von

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

dort können Sie die controllerAs Syntax hinzufügen müssen beschreiben :

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

Answer 2

Sie müssen die Modal-ID übergeben, um es zu öffnen, die fehlt!