指令的代码在我获得数据之前触发
[英] Directive's code fires before I got data
本文介绍了指令的代码在我获得数据之前触发的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这是这个问题的延续 从选择 ng- 中获取其他列选项
我的指令有问题.第一个问题是,在表单的第一个初始加载中,我可以正确地看到部门和类别,但项目显示选择项目"而不是项目.第二个问题是当我导航到列表中的另一行时,未显示初始值(例如,所有内容都显示选择部门"、选择类别"、选择项目"而不是值.我确认在那种情况下我还没有检索该行的数据.因此,只有在我获得数据后,我才需要运行指令的代码.
我该如何解决我的问题?
这是指令的完整代码:
(function () {'使用严格';var app = angular.module('sysMgrApp');app.directive('smDci', ['departmentService', 'categoryService', 'itemService', smDci]);功能 smDci(部门服务,类别服务,项目服务){var 指令 = {限制:'E',范围: {selectedDepartmentId: '=?departmentid',selectedCategoryId: '=?categoryid',selectedItemId: '= itemid',selectedDci: '=?dci'},控制器:['$scope', 'departmentService', 'categoryService', 'itemService',功能($scope,departmentService,categoryService,itemService){$scope.selectedDepartmentId = $scope.selectedDepartmentId ||0;$scope.selectedCategoryId = $scope.selectedCategoryId ||0;$scope.selectedItemId = $scope.selectedItemId ||0;$scope.selectedDci = $scope.selectedDci ||'';var init = 函数 () {$scope.metaData = {};window.console &&console.log('Selected DepartmentId = ' + $scope.selectedDepartmentId +'选定的类别Id = ' + $scope.selectedCategoryId + '选定的ItemId = ' + $scope.selectedItemId);DepartmentService.getAllDepartments().then(function (data) {$scope.metaData.departments = data.departments;//window.console &&console.log('得到所有部门...')});if ($scope.selectedDepartmentId == 0 && $scope.selectedCategoryId == 0 && $scope.selectedItemId != 0) {itemService.getItemById($scope.selectedItemId).then(function (data) {var item = data.item;如果(项目!= null){$scope.selectedItem = item;$scope.selectedDepartmentId = item.departmeId;$scope.selectedCategoryId = item.categoryId;window.console &&console.log('初始选择即将触发...')getInitialSelections();}});}别的 {getInitialSelections();}};var getInitialSelections = function(){如果($scope.selectedDepartmentId != 0){$scope.departmentChanged($scope.selectedDepartmentId);}如果($scope.selectedCategoryId != 0){$scope.categoryChanged($scope.selectedCategoryId);}}$scope.departmentChanged = function (departmentId) {如果(!部门ID){$scope.selectedCategoryId = '';$scope.selectedItemId = '';$scop.selectedItem = {};$scope.selectedDci = '';}别的{categoryService.getCategoriesByDepartmentId(departmentId).then(function (data) {$scope.metaData.categories = data.categories;//window.console &&console.dir($scope.selectedItem);});}};$scope.categoryChanged = 函数(categoryId){如果(!categoryId){$scope.selectedItemId = '';$scope.selectedItem = null;$scope.selectedDci = '';}别的{itemService.getItemsByCategoryId(categoryId).then(function (data) {$scope.metaData.items = data.items;});}};$scope.itemChanged = function(item){$scope.selectedItemId = item.itemId;$scope.selectedDci = item.department + item.category + item.item;}在里面();}],templateUrl: 'app/templates/smDci'};返回指令;}})();
及其 HTML:
<label class="control-label col-md-2" title="@Labels.dci">@Labels.dci:</label><div class="col-md-3"><select class="form-control" ng-model="selectedDepartmentId" name="department" id="department"ng-options="d.departmeId as d.descrip for d in metaData.departments"数据编号:脏检查ng-change="departmentChanged(selectedDepartmentId)"><option value="">@String.Format(Labels.selectX, Labels.department)</option></选择>
<div class="col-md-3"><select class="col-md-3 form-control" ng-model="selectedCategoryId" id="category" name="category"ng-disabled="!selectedDepartmentId"数据编号:脏检查ng-change="categoryChanged(selectedCategoryId)"ng-options="c.categoryId as c.descrip for c in metaData.categories | filter: {departmeId:selectedDepartmentId}"><option value="">@String.Format(Labels.selectX, Labels.category)</option></选择>
<div class="col-md-3"><select class="col-md-3 form-control" ng-model="selectedItem" id="item" name="item"ng-disabled="!selectedCategoryId"ng-change="itemChanged(selectedItem)"ng-options="c as c.descrip for c in metaData.items | filter: {departmeId:selectedDepartmentId, categoryId:selectedCategoryId}"><option value="">@String.Format(Labels.selectX, Labels.item)</option></选择><div class="field-validation-error"><span ng-show="item.$error.required">@String.Format(Messages.isRequired, Labels.item)</span>
<div class="clearfix"></div>
这就是我在表单中使用它的方式:
<data-sm:dci itemid="currentCardAct.itemId" dci="currentCardAct.dci"></data-sm:dci>
使用日志记录到控制台我可以看到在我需要后检索到的卡片数据,例如在控制台中我看到
所选部门 ID = 0 所选类别 ID = 0 所选项目 ID = 0CardActController.js:221 检索到的当前卡片活动数据..smDci.js:28 所选部门 ID = 0 所选类别 ID = 0 所选项目 ID = 0CardActController.js:221 检索到的当前卡片活动数据..
我想我可以在指令的代码中添加监视,但这是唯一的选择吗?
解决方案
我通过添加手表解决了这个问题.我现在正在尝试通过项目的初始选择来解决这个问题,显然这是一个已知的问题,参考这里 http://odetocode.com/blogs/scott/archive/2013/06/19/using-ngoptions-in-angularjs.aspx 关于初始选择.
This is continuation of this question Get other columns from select ng-options
I have the problems with my directive. First problem is that with the very first initial load of the form I can see correctly department and category, but item shows 'Select Item' instead of the item. The second problem is when I navigate to another row in the list, the initial values are not shown (e.g. everything is showing 'Select Department', 'Select Category', 'Select Item' instead of the values. I confirmed that in that situation I didn't retrieve the row's data yet. So, I need to run directive's code only after I got my data.
How can I resolve my problems?
Here is the whole code for the directive:
(function () {
'use strict';
var app = angular.module('sysMgrApp');
app.directive('smDci', ['departmentService', 'categoryService', 'itemService', smDci]);
function smDci(departmentService, categoryService, itemService) {
var directive = {
restrict: 'E',
scope: {
selectedDepartmentId: '=?departmentid',
selectedCategoryId: '=?categoryid',
selectedItemId: '=itemid',
selectedDci: '=?dci'
},
controller: ['$scope', 'departmentService', 'categoryService', 'itemService',
function ($scope, departmentService, categoryService, itemService) {
$scope.selectedDepartmentId = $scope.selectedDepartmentId || 0;
$scope.selectedCategoryId = $scope.selectedCategoryId || 0;
$scope.selectedItemId = $scope.selectedItemId || 0;
$scope.selectedDci = $scope.selectedDci || '';
var init = function () {
$scope.metaData = {};
window.console && console.log('Selected departmentId = ' + $scope.selectedDepartmentId +
' Selected categoryId = ' + $scope.selectedCategoryId + ' Selected ItemId = ' + $scope.selectedItemId);
departmentService.getAllDepartments().then(function (data) {
$scope.metaData.departments = data.departments;
//window.console && console.log('Got all departments...')
});
if ($scope.selectedDepartmentId == 0 && $scope.selectedCategoryId == 0 && $scope.selectedItemId != 0) {
itemService.getItemById($scope.selectedItemId).then(function (data) {
var item = data.item;
if (item != null) {
$scope.selectedItem = item;
$scope.selectedDepartmentId = item.departmeId;
$scope.selectedCategoryId = item.categoryId;
window.console && console.log('Initial selections are about to fire...')
getInitialSelections();
}
});
}
else {
getInitialSelections();
}
};
var getInitialSelections = function()
{
if ($scope.selectedDepartmentId != 0) {
$scope.departmentChanged($scope.selectedDepartmentId);
}
if ($scope.selectedCategoryId != 0) {
$scope.categoryChanged($scope.selectedCategoryId);
}
}
$scope.departmentChanged = function (departmentId) {
if (!departmentId) {
$scope.selectedCategoryId = '';
$scope.selectedItemId = '';
$scop.selectedItem = {};
$scope.selectedDci = '';
}
else
{
categoryService.getCategoriesByDepartmentId(departmentId).then(function (data) {
$scope.metaData.categories = data.categories;
//window.console && console.dir($scope.selectedItem);
});
}
};
$scope.categoryChanged = function (categoryId) {
if (!categoryId) {
$scope.selectedItemId = '';
$scope.selectedItem = null;
$scope.selectedDci = '';
}
else
{
itemService.getItemsByCategoryId(categoryId).then(function (data) {
$scope.metaData.items = data.items;
});
}
};
$scope.itemChanged = function(item)
{
$scope.selectedItemId = item.itemId;
$scope.selectedDci = item.department + item.category + item.item;
}
init();
}],
templateUrl: 'app/templates/smDci'
};
return directive;
}
})();
and its HTML:
<div class="row">
<label class="control-label col-md-2" title="@Labels.dci">@Labels.dci:</label>
<div class="col-md-3">
<select class="form-control" ng-model="selectedDepartmentId" name="department" id="department"
ng-options="d.departmeId as d.descrip for d in metaData.departments"
data-no:dirty-check
ng-change="departmentChanged(selectedDepartmentId)">
<option value="">@String.Format(Labels.selectX, Labels.department)</option>
</select>
</div>
<div class="col-md-3">
<select class="col-md-3 form-control" ng-model="selectedCategoryId" id="category" name="category"
ng-disabled="!selectedDepartmentId"
data-no:dirty-check
ng-change="categoryChanged(selectedCategoryId)"
ng-options="c.categoryId as c.descrip for c in metaData.categories | filter: {departmeId:selectedDepartmentId}">
<option value="">@String.Format(Labels.selectX, Labels.category)</option>
</select>
</div>
<div class="col-md-3">
<select class="col-md-3 form-control" ng-model="selectedItem" id="item" name="item"
ng-disabled="!selectedCategoryId"
ng-change="itemChanged(selectedItem)"
ng-options="c as c.descrip for c in metaData.items | filter: {departmeId:selectedDepartmentId, categoryId:selectedCategoryId}">
<option value="">@String.Format(Labels.selectX, Labels.item)</option>
</select>
<div class="field-validation-error">
<span ng-show="item.$error.required">@String.Format(Messages.isRequired, Labels.item)</span>
</div>
</div>
</div>
<div class="clearfix"></div>
And this is how I use it in the form:
<data-sm:dci itemid="currentCardAct.itemId" dci="currentCardAct.dci"></data-sm:dci>
Using the logging to console I can see that card data retrieved after I need, e.g. in the console I see
Selected departmentId = 0 Selected categoryId = 0 Selected ItemId = 0
CardActController.js:221 Current Card Activity data retrieved..
smDci.js:28 Selected departmentId = 0 Selected categoryId = 0 Selected ItemId = 0
CardActController.js:221 Current Card Activity data retrieved..
I guess I can add watches in the directive's code, but is it the only option?
解决方案
I solved the problem by adding a watch. I'm now trying to solve the problem with the initial selection of the item and apparently it's a known problem as referenced here http://odetocode.com/blogs/scott/archive/2013/06/19/using-ngoptions-in-angularjs.aspx about initial selection.
这篇关于指令的代码在我获得数据之前触发的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!