弹出模式的控制器和服务

Question

我是 AngularJS（1.6 版）的新手，我有一个小任务 - 在单击 "edit" 按钮时实现一个新的弹出模式，该按钮将有一些文本框可供编辑东西。

我无法理解如何调用每个 js 文件，因此我无法完成 "mission"。

该应用程序目前是这样构建的（新应用程序 - 所以我需要构建良好的基础）。

index.cshtml 包含此代码（在与我的任务相关的部分）

 <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() {
...
......

还有一个boardService.js还有

我不明白的是：

现在我需要添加一个弹出窗体 edit.html 和一个 controller 和一个 service （我想添加另一个控制器因为我想保持分离并且为了便于理解).

如何将它们连接在一起？例如：从 boardCtrl.js 调用 edit-controller.js 并从 edit-controller 使用编辑服务？

Answer 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();
}

Answer 2

据我了解，您的问题更多是关于如何使用控制器和服务构建代码。所以这是它可以是什么的一个小例子：

<head>
    <!-- Import your JS files in index.html -->
    <script src="topController.js/>
    <script src="middleController.js/>
    <script src="dataService.js/>
</head>

<div ng-app="myApp">
  <div ng-controller="TopController">
       Controlled by TopController
  </div>

  <div ng-controller="MiddleController">
      Controlled by MiddleController
  </div>
</div>

控制器和服务定义如下：

myApp.controller('TopController', function($scope, Data) {
  $scope.data = Data;
});

myApp.controller('MiddleController', function($scope, Data) {
  $scope.data = Data;
});

myApp.factory('Data', function() {
  obj = {
    "topValue": "top",
    "middleValue": "middle",
    clear: function() {
      this.topValue = "";
      this.middleValue = "clear";
    }
  };
  return obj;
});

Test it on JSFiddle

Answer 3

这是真实的例子，希望对你有帮助！

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

弹出模式的控制器和服务

controller and service for popup modal

angularjs

angularjs-1.6