1. ホーム
  2. 質問と答え
  3. ポップアップモードのコントローラーとサービス

ポップアップモードのコントローラーとサービス

2017-03-07 10 views
0

AngularJS（バージョン1.6）はかなり新しいです。何かを編集するためのテキストボックスを持つ「編集」ボタンをクリックすると、新しいポップアップモーダルを実装するという少しの使命があります。ポップアップモードのコントローラーとサービス

jsファイルをそれぞれ呼び出す方法がわかりません。そのため、「ミッション」を終了することができません。

現在、アプリはそのように構築されています（新しいアプリ - いいのでベースを構築する必要があります）。 （ページの先頭から部分）

<p><a href="#" class="btn btn-primary btn-sm" role="button" ng-click="editCard(card)">Edit</a>

main.js

// application global namespace 
var sulhome = sulhome || {}; 
sulhome.kanbanBoardApp = angular.module('kanbanBoardApp', []); 
....

boardCtrl.js（私の使命に関連する部分で）このコード

sulhome.kanbanBoardApp.controller('boardCtrl', function ($scope, boardService) { 
// Model 
$scope.board = {}; 
$scope.isLoading = false; 

function init() { 
... 
......

を含む

index.cshtml Ther eは、私が理解して失敗しています何boardService.jsも

であることである：

今私は、ポップアップフォームedit.htmlとcontrollerとservice（私は分離を維持したい別のコントローラ原因を追加するを追加する必要があります理解しやすくするために）。

どうすればそれらを一緒に接続できますか？ 例：boardCtrl.jsからedit-controller.jsとedit-controllerを呼び出して、編集サービスを使用しますか？

出典

2017-03-07 E.Meir

+0

たぶん、あなたは[UIブートストラップ]（https://angular-ui.github.io/bootstrap/#!#modal）を使用するか、[AngularStrap]（http://mgcrea.github.io/角ストラップ/＃/モーダル）を使用してモーダルを実装します。ここでは、モーダルを開くときにテンプレートファイルとコントローラを簡単に定義できます。そして、サービスはいつものようにコントローラに注入することができます。 – Brakebein

+0

私は結局 "単純な部分"を実装するために "http：// schemaform.io'を使わなければなりません。 フォームに新しいコントローラが必要ですか？ –

+0

まあ、私はまだスキーマフォームを使用していません。しかし、あなたはおそらくあなたのモーダルのためのコントローラを持っていて、スキーマ・フォーム・ディレクティブの出力を処理することができます（例えばリクエストに）。 – Brakebein

答えて

1

これが本当のeaxmpleであるが、それは助けを願っので、ここでそれができるかの小さな例です。君は ！

<!DOCTYPE html> 
<html ng-app="injectService"> 
<head> 
    <title>Test Angular Inject Service</title> 
    <style type="text/css"> 
     body{ 
      margin:0; 
      padding:0; 
      width: 100%; 
      height: 100%; 
      position: absolute; 
      text-align: center; 
     } 

     body > input{ 
       width: 25%; 
       height: 50px; 
       background: #adbfbf; 
       border: 0px; 
       margin-top: 5%; 
     } 

    </style> 
</head> 
<body ng-controller="testCtrl as Test"> 
    <input type="button" name="test" value="Click me !" ng-click="Test.test()"> 
</body> 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> 
<script type="text/javascript"> 
    angular.module('injectService', []); 


    //service 
    (function() { 
    'use strict'; 

    angular 
     .module('injectService') 
     .factory('testService', testService); 

    function testService() { 
     var service = { 
      getAction    : getAction 
     }; 

     return service; 

     function getAction() { 
      alert('test yoho !') 
     } 

    } 

})(); 

    //controller 
    (function() { 
    'use strict'; 

    angular 
     .module('injectService') 
     .controller('testCtrl', testCtrl); 

    testCtrl.$inject = ['testService']; 

    function testCtrl(testService) { 
     var vm = this; 

     vm.test = function(){ 
      testService.getAction();  
     } 
    } 

})(); 

</script> 
</html>

出典

2017-03-07 16:06:52

1

私はあなたの質問をあなたのコントローラにあなたのサービスを注入したいと思う場合。

例：私は理解したよう

sulhome.kanbanBoardApp.factory('requestService', function($http, $cookies){ 

    var factory = { 


     sendRequest: function(method, url, params){ 

      } 
    }; 

    return factory; 

});

そして、あなたのコントローラでは、

sulhome.kanbanBoardApp.controller('boardCtrl', function ($scope, boardService, requestService) { 

//write your code here 
//you can call your service like 

requestFactory.sendRequest(); 
}

出典

2017-03-07 12:40:10

+0

はい、あなたはそれを正しく理解していますが、 'boardCtrl'に' requestService'を注入するのは理解できませんが、 'request'をどこに注入しますか？それのために全く新しいコントローラが必要ですか？ –

+0

もちろん、アプリケーション宣言の前に通常のスクリプトのようにjsファイルをDOMに含める必要はありません。 –

+0

他のコントローラを使用する必要はありませんか？

  • 11. すべての基本的なautowiredサービスの基本コントローラー
  • 12. 誰が解析するのですか？コントローラーまたはサービス層？
  • 13. どこのようなサービスを呼び出すコントローラーでRails.application.routes.url_helpers
  • 14. jsonデータを表示する角、コントローラー、サービスの相互作用
  • 15. コントローラーの代わりにサービスでjsonをフェッチする
  • 16. ヘッダーマネージャーと録音コントローラー
  • 17. サービスを使用するサービスを呼び出すコントローラーをテストする方法$ http
  • 18. セイルjs：コントローラーとの接続
  • 19. コントローラーは他のコントローラーとデータを共有できます
  • 20. ブートストラップでポップアップモードの位置をリセットする方法は？
  • 21. 別のコントローラー内の角度付きコントローラー
  • 22. コントローラーで角度サービスを使用する方法
  • 23. コントローラー/サービス/ DAOで動作する方が良いデザインパターン
  • 24. $リソース応答でサービスを実行するコントローラーをテストする
  • 25. コントローラーから前のコントローラーに戻る
  • 26. codeigniter3コントローラーからコントローラーへの機能
  • 27. 他のコントローラーを呼び出すSpringコントローラー
  • 28. コントローラーをポップするとコントローラーから離れたnav
  • 29. 城ウィンザー3.0とASP.NET MVCコントローラー
  • 30. 一つのコントローラーが別のコントローラーにユーザーを送ることができます

    •  関連する問題