我是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使用编辑服务？
这是真正的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>
如果我了解您的问题，您想向控制器注入服务。
示例：
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();
}
据我了解，您的问题更多地是关于如何使用控制器和服务来构建代码。因此，这里有一个可以是什么的例子：
<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上对其进行测试