从与另一个Angularjs控制器相关的Angularjs视图中调用Angularjs控制器方法
Invoke Angularjs controller method from Angularjs view which related to another Angularjs controller
我是Angularjs的新手,我创建了一个简单的web应用程序,可以从用户那里获取详细信息并在视图中显示详细信息。我在从另一个角度调用一个控制器的方法时遇到了问题。有人能帮我吗,谢谢。
主页.html
<div id="main">
<div id="first">
<form ng-controller="homeController as model" ng-submit="push();">
<h1>Vehicle Form</h1>
<h4>Please fill all entries.</h4>
<br>
<label>Model :</label>
<input name="dname" placeholder="Enter Model" type="text" ng-model="model.user.model">
<br>
<label>Name :</label>
<input name="demail" placeholder="Enter name" type="text" ng-model="model.user.name">
<br>
<label>Color :</label>
<input name="demail" placeholder="Enter color" type="text" ng-model="model.user.color">
<br>
<label>Price :</label>
<input name="demail" placeholder="Your Email" type="text"ng- model="model.user.price">
<br>
<input name="dsubmit" type="submit" value="Send">
</form>
</div>
</div>
<br>
<br>
<h1>Vehicle Table </h1>
<table class="table table-striped table-hover table-users" ng-controller="homeController">
<thead>
<tr>
<th>Id</th>
<th>Model</th>
<th>Name</th>
<th>Color</th>
<th>Price</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="vehicle in hello">
<td>{{vehicle.id}}</td>
<td>{{vehicle.model}}</td>
<td>{{vehicle.name}}</td>
<td>{{vehicle.color}}</td>
<td>{{vehicle.price}}</td>
<td><a class="btn mini blue-stripe" ui-sref="about" ng-click="setValue(vehicle.id)">Edit</a></td>
<td><a href="#" class="confirm-delete btn mini red-stripe" role="button">Delete</a></td>
</tr>
</tbody>
</table>
home.js(控制器文件)
var myapp = angular.module('demo').controller("homeController", function($scope,myService){
myService.async().then(function(d){
$scope.hello=d.data;
});
var model=this;
model.user={
id:"",
model:"",
name:"",
color:"",
price:""
};
$scope.push = function(){
myService.saveUser(model.user);
model.user='';
}
});
about.html
<div id="main">
<div id="first">
<form ng-controller="aboutController" ng-submit="addValue();">
<h1>Vehicle Edit Form</h1>
<br>
<label>Id :</label>
<input name="id" placeholder="Enter Id" type="text" ng-model="id" value="value.id">
<br>
<label>Model :</label>
<input name="model" placeholder="Enter Model" type="text" ng-model="model" value="value.model">
<br>
<label>Name :</label>
<input name="name" placeholder="Enter name" type="text" ng-model="name" value="value.name">
<br>
<label>Color :</label>
<input name="color" placeholder="Enter color" type="text" ng-model="color" value="value.color">
<br>
<label>Price :</label>
<input name="price" placeholder="Your Email" type="text" ng-model="price" value="value.price">
<br>
<input name="update" type="Update" value="Send">
</form>
</div>
</div>
about.js(第二个控制器)
angular.module('demo').controller("aboutController", function($scope, aboutService) {
$scope.value;
$scope.setValue = function() {
aboutService.getVehicle().success(function (response) {
$scope.value = studs.data;
})
};
$scope.addValue = function () {
var stud = {
id:"$scope.id",
model:"$scope.model",
name:"$scope.name",
color:"$scope.color",
price:"$scope.price"
};
aboutService.setVehicle(stud).
success( function (){
concole.log("hello");
})
};
});
js(模块文件)
var myapp = angular
.module('demo', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'Views/home.html',
controller: 'homeController'
})
.state('about', {
url: '/about',
templateUrl: 'Views/about.html',
controller: 'aboutController'
})
.state('contact', {
url: '/contact',
templateUrl: 'Views/contact.html',
controller: 'contactController'
});
});
homeService.js
myapp.factory('myService',function($http){
var myService={
async : function(){
var promise= $http.get('http://192.168.50.127:8080/SpringRestfulVehicleDemo2/vehicle/all').then(function(response){
return response;
});
return promise;
},
saveUser : function(userArray){
$http.post('http://192.168.50.127:8080/SpringRestfulVehicleDemo2/vehicle/add ',userArray).success(
function(userArray,status,headers,config){
});
}
};
return myService;
});
aboutService.js(另一个服务文件)
myapp.factory('aboutService',function($http){
var aboutService={};
var urlBase='http://192.168.50.127:8080/SpringRestfulVehicleDemo2/vehicle/';
aboutService.getVehicle = function () {
retun $http.get(urlBase+'/byId/:id');
};
aboutService.setVehicle= function (){
return $http.post(urlBase+'/update/:id');
}
return aboutService;
});
我正在做的是从服务器获取数据并在表中显示数据。我想在另一个视图中编辑选定的行。当我在home.html
中单击编辑按钮时,我遇到了一个问题。它应该调用about.js
(控制器)setValue()
方法。
要做到这一点,您需要控制器之间进行通信。通信可以使用以下任何一种方法
- 使用$emit+$on/$broad+$on
- 制作一个包含该功能的服务,并将其注入到希望相互通信的控制器中
在您的情况下,您可以将setValue方法移动到使用它的控制器之间的共享服务,也可以使用方法1。
你已经知道如何提供服务了。对于方法1,示例如下:
app.controller('One', ['$scope', '$rootScope'
function($scope) {
$rootScope.$on("CallParentMethod", function(){
$scope.parentmethod();
});
$scope.parentmethod = function() {
// task
}
}
]);
app.controller('two', ['$scope', '$rootScope'
function($scope) {
$scope.childmethod = function() {
$rootScope.$emit("CallParentMethod", {});
}
}
]);
相关文章:
- 将值从html传递到AngularJS控制器
- angularjs-控制器在表单提交时未调用
- Angularjs控制器本地错误
- AngularJS:控制器中的函数被模板多次调用
- 将AngularJS控制器拆分为多个文件
- AngularJS控制器范围
- AngularJS控制器不工作,为什么?(简单的控制器示例)
- AngularJS控制器在注入工厂时抛出错误
- 如何使用onclick事件调用AngularJS控制器
- angularjs控制器未启动
- 设置AngularJS控制器属性不能是使用Coffeescript的最后一行
- 如何使AngularJS控制器依赖于通过ajax加载在rootScope上的值
- 通过因果报应测试管理angularjs控制器初始化
- AngularJs 控制器中的实时时钟功能
- Angularjs:控制器的代码组织
- 简单的AngularJS控制器不起作用
- 如何从 angularjs 控制器访问$resource
- 在 html5 视频结束时调用 AngularJS 控制器函数
- AngularJS控制器内部的功能
- AngularJS控制器中基于值的重定向