在AngularJS中使用「Controller as something」

AngularJS Controller「as」語法存在問題。我正在嘗試使用引導程序nanomodals並將其附加到控制器$ scope。在AngularJS中使用「Controller as something」

現在，我爲我的模態創建角度分量。我也用html創建了我的對話框。

我的html代碼：

<body ng-app="application"> 
    <div ng-controller="accountController as $acc" class="controller-account"> 
     <script type="text/ng-template" id="loginModal.html"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Nowe konto</h4> 
      </div> 
      <div class="modal-body"> 
       <form> 
        <div class="form-group"> 
         <label for="userNameInput">Nazwa użytkownika:</label> 
         <input type="text" class="form-control" id="userNameInput" placeholder="Wprowadź nazwę użytkownika"> 
        </div> 
        <div class="form-group"> 
         <label for="userPasswordInput">Hasło:</label> 
         <input type="password" class="form-control" id="userPasswordInput" placeholder="Password"> 
        </div> 
        <div class="form-group"> 
         <label for="userEmailInput">E-Mail:</label> 
         <input type="email" class="form-control" id="userEmailInput" placeholder="Wprowadź E-mail"> 
        </div> 
        <button ng-click="$acc.okButton()" class="btn btn-primary">Załóż konto</button> 
       </form> 
      </div> 
     </script>

我的JS腳本：

var angularApp = angular.module('application', ['ngAnimate', 'ngSanitize', 'ngCookies', 'ui.bootstrap']); 
angularApp.component('loginModalComponent', { 
templateUrl: 'loginModal.html', 
bindings: { 
    resolve: '<', 
    close: '&', 
    dismiss: '&' 
}, 
controller:() => { 
    var $acc = this; 

    $acc.$onInit =() => { 

    }; 

    $acc.okButton =() => { 
     console.log('Liiiii'); 
     //HTTP request about login 
    }; 

    $acc.closeButton =() => { 
     $acc.close(); 
    } 
} 


}); 

angularApp.controller('accountController', ['$scope', '$http', '$cookies', '$uibModal', 
function($scope, $http, $cookies, $uibModal){ 
var $acc = this; 

$acc.isUserSignIn = false; 

$acc.loginModalOpen =() => { 
    var modalInstance = $uibModal.open({ 
     animation: true, 
     component: 'loginModalComponent', 
     resolve: { 

     } 
    }); 
}; 
}]);

我不知道爲什麼，但我不能在這個例子$ acc.okButton（）函數中使用。

我用this和this來解決這個問題，但我不能這樣做。這裏有些不好，但我不知道是什麼。

來源

2017-06-20 Jerzy Gawor

被認爲是該組件本身的代碼的HTML代碼，或者你試圖使用有分量的？ –

我想和[鏈接] https://plnkr.co/edit/mKrqmV35ary96rItbw6N?p=preview一樣，但我不得不錯過一些東西。這個html是我的家。在腳本標籤中的ng控制器中，我得到了我的模態模板，它由組件使用。點擊某個按鈕後會出現對話框，但我無法調用任何$ acc功能。 –

這並不能真正回答我的任何問題，但基本上，不要將控制器與組件混合使用。組件已經指定了它的控制器。您需要將模板分成自己的html頁面，然後使用將您的控制器包含在您的頁面中您想要的位置。組件基本上是簡化的指令。 –

您聲明瞭一個組件，但我在您的html代碼中看不到它。

所以，首先你需要把模態的html文件放在文件'loginModal.html'中，並從中刪除'ng-controller'指令。因此，在該文件中的代碼應該是這樣的：

看來你需要更換此：

<div ng-controller="accountController as $acc" class="controller-account">

與此：

<login-modal-component class="controller-account" />

在這種情況下，它會使用你的控制器中所描述組件聲明。但是，您也會將controllerAs: '$acc'添加到您的組件，因爲它默認使用$ ctrl。

所以你也需要稍微改變這樣的代碼：

angularApp.component('loginModalComponent', { 
     templateUrl: 'loginModal.html', 
     bindings: { 
      resolve: '<', 
      close: '&', 
      dismiss: '&' 
     }, 
     controller:() => { 
      var $acc = this; 

      $acc.$onInit =() => { 

      }; 

      $acc.okButton =() => { 
       console.log('Liiiii'); 
      }; 

      $acc.closeButton =() => { 
       $acc.close(); 
      } 
     }, 
     controllerAs: '$acc' // ADD THIS LINE 
    });

來源

2017-06-20 20:15:06

添加controllerAs並替換後，仍然無法正常工作。我不明白，爲什麼我應該用登錄模式組件替換ng控制器？ –

@JerzyGawor，使用當前代碼示例來理解當前的問題非常困難。原因也可能是您使用'$ acc'兩次：在組件中聲明的控制器中以及連接到angularApp的'accountController'中。順便檢查一下你的鏈接。 –

也許我不明白如何角度組件工作，但我的代碼示例顯示對話框後單擊s按鈕，所以組件看起來正常工作。問題在於Ok Button，它不能使用$ acc方法。也許好點是刪除$ acc並開始在這裏使用$ scope。 –

在AngularJS中使用「Controller as something」

回答

相關問題