Question

我对AngularJS（版本1.6）相当新，我有一点任务 - 在点击＆＃34;编辑＆＃34;时实现一个新的弹出模式。按钮，它将有一些文本框来编辑某些内容。

我无法理解如何调用每个js文件，因此我无法完成＆＃34;任务＆＃34;。

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

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

这是真正的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>

Answer 3

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

<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

弹出模式的控制器和服务

3 个答案: