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

回答

相关问题