Angular - ControllerAs中的函數無法執行

Question

我是Angular的新手，想使用Angular的ui-bootstrap使用Modal（Popup表單）。我正在從Angular bootstrap site中學習。可以看出它利用ControllerAs來控制彈出窗口。

我所面臨的問題是在CTRL功能無法ng-click事件被執行，即使我已經把正確的價值ng-click='ctrl.open()'

使其更清晰，下面我會提供我的代碼。

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

注意，即使是console.log('selected');不會觸發。因此，可以得出結論，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> 
... 

我所試圖做的是開放的，每當用戶點擊用戶名小區的模式。 HTML工作正常，因爲我試圖將ng-click更改爲$scope中的函數，並且它正在工作。此外，console.log(ctrl);顯示的內容，所以我相信ctrl對象設置。下面我提供日誌的截圖。

注意，我DevTools Chrome的警告，我不知道如何擺脫它（我用.min.js，而不是.map）。但是，我不認爲這是問題。

我不確定我出錯的地方。任何幫助和指導，將不勝感激。

Answer 1

你似乎混淆了你的當前控制器與modalController。您聲明controllerAs: 'ctrl'爲您的模式，但這並不意味着您可以在當前控制器中使用ctrl。

您有兩個控制器，listEmployeeCtrl和ModalInstanceCtrl。只有第二個控制器（ModalInstanceCtrl）可以在其模板中使用ctrl。

如果你想使用ctrl爲listEmployeeCtrl以及你需要的ng-controller指令添加到view.html。

使用示例代碼：

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

有線條的東西，你可以添加controllerAs語法：

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