我正在致力于将 Angular 工厂实现到我正在进行的项目中。
我已经开始工作路由:ArtLogMain.js
var ArtLog = angular.module('ArtLog', ['ngGrid', 'ui.bootstrap']);
ArtLog.config(function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when("/ArtLog", {
controller: "ArtLogCtrl",
templateUrl: "/Templates/ArtLog/Index.html"
});
$routeProvider.when("/ArtLog/:Id", {
controller: "ArtLogEditCtrl",
templateUrl: "/Templates/ArtLog/Edit.html"
});
$routeProvider.when("/ArtLog/Dashboard", {
controller: "ArtLogDashBoardCtrl",
templateUrl: "/Templates/ArtLog/Dashboard.html"
});
$routeProvider.otherwise("/");
});
接下来我设置工厂:ArtLogDataService
ArtLog.factory("ArtLogDataService", function ($q) {
breeze.config.initializeAdapterInstance("modelLibrary", "backingStore", true);
var _artLogView = [];
var _artLogSingle = [];
var _getArtLogById = function (Id) {
var deferred = $q.defer();
var manager = new breeze.EntityManager('breeze/BreezeData');
var query = new breeze.EntityQuery().from('Project').where("Id", "Equals", Id);
manager.executeQuery(query).then(function (data) {
angular.copy(data, _artLogSingle);
deferred.resolve();
}).fail(function () {
deferred.reject();
});
return deferred.promise;
};
var _getArtLogView = function () {
var deferred = $q.defer();
var manager = new breeze.EntityManager('breeze/BreezeData');
var query = new breeze.EntityQuery().from('ArtLogView');
manager.executeQuery(query).then(function (data) {
//angular.copy(data.results, _artLogView);
_artLogView = data.results;
deferred.resolve();
}).fail(function () {
deferred.reject();
});
return deferred.promise;
};
return {
artLogView: _artLogView,
artLogSingle: _artLogSingle,
getArtLogView: _getArtLogView,
getArtLogById: _getArtLogById
};
})
Controller :ArtLogController.js
function ArtLogCtrl($scope, ArtLogDataService) {
$scope.ArtLogData = ArtLogDataService;
$scope.editableInPopup = '<button id="editBtn" type="button" class="btn btn-primary" ng-click="edit(row)" >Edit</button>';
ArtLogDataService.getArtLogView();
$scope.edit = function (row) {
window.location.href = '/ArtLog/' + row.entity.Id;
};
$scope.gridOptions = {
data: ArtLogDataService.artLogView,
showGroupPanel: true,
enablePinning: true,
showFilter: true,
multiSelect: false,
columnDefs: [
{ displayName: 'Edit', cellTemplate: $scope.editableInPopup, width: 80, pinned: true, groupable: false, sortable: false },
{ field: 'ArtNum', displayName: 'Art Number', resizable: true, pinned: true, groupable: false, width: '100px' },
{ field: 'CreateDate', displayName: 'Date Created', cellFilter: "date:'MM-dd-yyyy'", pinnable: false, width: '110px' },
{ field: 'ArtCompletionDue', displayName: 'Art Comp Due Date', cellFilter: "date:'MM-dd-yyyy'", pinnable: false, width: '160px', enableCellEdit: true },
{ field: 'DaysLeft', displayName: 'Days Left', pinnable: false, width: '90px' },
{ field: 'RevisionNum', displayName: 'Rev Number', pinnable: false, width: '100px' },
{ field: 'Status', displayName: 'Status', pinnable: false, width: '80px' },
{ field: 'Template', displayName: 'Template', pinnable: false, width: '190px' },
{ field: 'Driver', displayName: 'Driver', pinnable: false, width: '160px' },
{ field: 'AssignedTo', displayName: 'Assigned To', pinnable: false, width: '160px' },
{ field: 'BuddyArtist', displayName: 'Buddy Artist', pinnable: false, width: '160px' }
],
filterOptions: {
filterText: "",
useExternalFilter: false
}
};
}
我在 ArtLogDataService.getArtLogData 上设置了断点,并且看到调用触发。我还看到查询运行并返回数据,但是当我查看从工厂返回的 ArtLogDataService 对象时,它始终显示 Array[0]。数据似乎从未绑定(bind)到 artLogView。
我做错了什么?
谢谢!
最佳答案
问题是来自 Breeze 的网络回调不是 Angular 更新循环的一部分。 Angular 不知道您的数据已更改,因此 View 绑定(bind)上的观察者永远不会更新。
当数据返回时,您需要连接 $scope.$apply()
调用。这将导致绑定(bind)注意到数据的变化并更新。
也许是这样的:
ArtLogDataService.getArtLogView().then(function() {
$scope.$apply();
});
如果您在 Angular 中完成所有操作,则永远不需要调用 $scope.$apply
,因为任何可能改变数据的内容(事件、网络响应、超时等)都将由 Angular 处理(通过 $http
和 $timeout
等)和 $apply
将自动被调用。正是在数据被 Angular 外部的事件更改的情况下,$scope.$apply
是必要的。
希望这对您有用!
关于javascript - 使用 BreezeJs 从 Angular 工厂获取数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18599837/