0

我对AngularJS（1.6 版）相当陌生，我有一个小任务——在单击“编辑”按钮时实现一个新的弹出模式，该按钮将有一些文本框来编辑某些内容。

我无法理解如何调用每个 js 文件，因此我无法完成“任务”。

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

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，使用编辑服务？

4

3 回答 3

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-07T12:40:10.723 回答
1

这是真正的例子，希望对您有所帮助！

<!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-07T16:06:52.187 回答
0

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

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

在 JSFiddle 上测试它

于 2017-03-07T12:54:57.220 回答