使用 $emit 从子控制器向父控制器发送值
Send value from child controller to parent with $emit
所以我想将下拉列表和输入文本字段中的值从 FirstController 发送到 MainController,并将日期选择器中的值从 SecondController 发送到 MainControler。我正在尝试使用 $emit 和 $on 但没有成功。也许我以错误的方式从这些输入中获取值...您可以在下面找到我的代码。
主控制器
'use strict';
angular.module('app').controller('MainController', ['$scope',
function($scope) {
$scope.$on('send-type-id', getObjectValues);
$scope.$on('send-date', getDateValues);
function getObjectValues(e, selectedObjectType, inputObjectId){
$scope.objectType = selectedObjectType;
$scope.objectId = inputObjectId;
console.log($scope.objectType);
console.log($scope.objectId);
}
function getDateValues(e, dateFrom, dateTo){
$scope.startDate = dateFrom;
$scope.endDate = dateTo;
console.log($scope.startDate);
console.log($scope.endDate);
}
}
]);
第一个控制器
angular.module('app').controller('FirstController',['$scope',
function($scope){
$scope.$emit('send-type-id',auditDropdown, selectId);
}
])
第一个控制器视图
<div ng-controller="SelectionController">
<div class="well-panel">
<div class="panel-body">
<select class="form-control" ng-model="auditDropdown" ng-init="auditDropdown = auditDropdown || config.auditDropdown[0]"
ng-options="option.id as option.name for option in config.auditDropdown">
</select>
<input class="form-control" ng-model="selectId" type="text">
<div ng-include="'modules/audit/views/components/audit-datepickers.client.view.html'"></div>
<div>
<button class="btn btn-sm btn-default" type="button">
{{'audit.navigation.button.generateAuditReport.btn'| translate}}
</button>
</div>
</div>
</div>
选项的配置文件
...
"auditDropdown": [
{"id": "Name1", "name": "Name 1"},
{"id": "Name2", "name": "Name 2"},
{"id": "Name3", "name": "Name 3"},
]
...
第二控制器
angular.module('app').controller('SecondController',['$scope',
function($scope){
$scope.$emit('send-date',auditDropdown, selectId);
}
])
第二控制器视图
<div ng-controller="SecondController">
<section id="datepickerSection">
<div>
<input
type="date"
ng-model="startDate"
class="form-control"
placeholder="mm/dd/yyyy"
datepicker-popup
/>
</div>
<div>
<input
type="date"
ng-model="endDate"
class="form-control"
placeholder="mm/dd/yyyy"
datepicker-popup
/>
</div>
</section>
</div>
编辑
我收到错误消息,提示 auditDropDown 在 SecondController 中未定义....
您应该从 $scope
中获取 auditDropDown
,否则 js 将查找名为 auditDropDown
的变量(selectId
也是如此):
$scope.$emit('send-type-id', $scope.auditDropdown, $scope.selectId);
$scope.$emit('send-date',$scope.auditDropdown, $scope.selectId);
所以我想将下拉列表和输入文本字段中的值从 FirstController 发送到 MainController,并将日期选择器中的值从 SecondController 发送到 MainControler。我正在尝试使用 $emit 和 $on 但没有成功。也许我以错误的方式从这些输入中获取值...您可以在下面找到我的代码。
主控制器
'use strict';
angular.module('app').controller('MainController', ['$scope',
function($scope) {
$scope.$on('send-type-id', getObjectValues);
$scope.$on('send-date', getDateValues);
function getObjectValues(e, selectedObjectType, inputObjectId){
$scope.objectType = selectedObjectType;
$scope.objectId = inputObjectId;
console.log($scope.objectType);
console.log($scope.objectId);
}
function getDateValues(e, dateFrom, dateTo){
$scope.startDate = dateFrom;
$scope.endDate = dateTo;
console.log($scope.startDate);
console.log($scope.endDate);
}
}
]);
第一个控制器
angular.module('app').controller('FirstController',['$scope',
function($scope){
$scope.$emit('send-type-id',auditDropdown, selectId);
}
])
第一个控制器视图
<div ng-controller="SelectionController">
<div class="well-panel">
<div class="panel-body">
<select class="form-control" ng-model="auditDropdown" ng-init="auditDropdown = auditDropdown || config.auditDropdown[0]"
ng-options="option.id as option.name for option in config.auditDropdown">
</select>
<input class="form-control" ng-model="selectId" type="text">
<div ng-include="'modules/audit/views/components/audit-datepickers.client.view.html'"></div>
<div>
<button class="btn btn-sm btn-default" type="button">
{{'audit.navigation.button.generateAuditReport.btn'| translate}}
</button>
</div>
</div>
</div>
选项的配置文件
...
"auditDropdown": [
{"id": "Name1", "name": "Name 1"},
{"id": "Name2", "name": "Name 2"},
{"id": "Name3", "name": "Name 3"},
]
...
第二控制器
angular.module('app').controller('SecondController',['$scope',
function($scope){
$scope.$emit('send-date',auditDropdown, selectId);
}
])
第二控制器视图
<div ng-controller="SecondController">
<section id="datepickerSection">
<div>
<input
type="date"
ng-model="startDate"
class="form-control"
placeholder="mm/dd/yyyy"
datepicker-popup
/>
</div>
<div>
<input
type="date"
ng-model="endDate"
class="form-control"
placeholder="mm/dd/yyyy"
datepicker-popup
/>
</div>
</section>
</div>
编辑
我收到错误消息,提示 auditDropDown 在 SecondController 中未定义....
您应该从 $scope
中获取 auditDropDown
,否则 js 将查找名为 auditDropDown
的变量(selectId
也是如此):
$scope.$emit('send-type-id', $scope.auditDropdown, $scope.selectId);
$scope.$emit('send-date',$scope.auditDropdown, $scope.selectId);