Javascript 使用BreezeJs从angular factory获取数据_Javascript_Angularjs_Breeze

Javascript 使用BreezeJs从angular factory获取数据

javascript angularjs breeze

Javascript 使用BreezeJs从angular factory获取数据,javascript,angularjs,breeze,Javascript,Angularjs,Breeze,我正在将一个角度工厂应用到一个项目中我已经开始工作了：ArtLogMain.js var ArtLog = angular.module('ArtLog', ['ngGrid', 'ui.bootstrap']); ArtLog.config(function ($locationProvider, $routeProvider) { $locationProvider.html5Mode(true); $routeProvider.when("/ArtLog", {

我正在将一个角度工厂应用到一个项目中

我已经开始工作了：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
    };
})

控制器：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
        }
    };
}

函数ArtLogCtrl（$scope，ArtLogDataService）{
$scope.ArtLogData=ArtLogDataService；
$scope.editableinpoup='Edit'；
ArtLogDataService.getArtLogView（）；
$scope.edit=函数（行）{
window.location.href='/ArtLog/'+row.entity.Id；
};
$scope.gridOptions={
数据：ArtLogDataService.artLogView，
showGroupPanel：正确，
启用钉扎：正确，
showFilter：是的，
多选：错，
columnDefs：[
{displayName:'Edit'，cellTemplate:$scope.editableInPopup，宽度：80，pinted:true，groupable:false，sortable:false}，
{field:'ArtNum'，displayName:'Art Number'，可调整大小：true，pinted:true，groupable:false，width:'100px'}，
{字段：'CreateDate'，显示名称：'Date Created'，cellFilter:'Date:'MM-dd-yyyy'，pinnable:false，宽度：'110px'}，
{field:'ArtCompletionDue'，displayName:'Art Comp Due Date'，cellFilter:'MM-dd-yyyy'，pinnable:false，width:'160px'，enableCellEdit:true}，
{字段：'DaysLeft'，显示名称：'Days Left'，可钉住：false，宽度：'90px'}，
{字段：'RevisionNum'，显示名称：'Rev Number'，pinnable:false，宽度：'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'}，
{字段：'BuddyArtist'，显示名称：'Buddy Artist'，可折叠：false，宽度：'160px'}
],
过滤器选项：{
筛选文本：“”，
useExternalFilter:false
}
};
}

我在ArtLogDataService.getArtLogData上设置了一个断点，我看到调用被触发。我还看到查询运行并返回数据，但当我查看从工厂返回的ArtLogDataService对象时，它总是显示数组[0]。数据似乎从未绑定到artLogView

我做错了什么

谢谢

问题在于，来自Breeze的网络回调不属于角度更新循环的一部分。Angular不知道您的数据已更改，因此视图绑定上的监视程序永远不会更新

当数据返回时，您需要连接一个

$scope.$apply（）

调用。这将导致绑定注意到数据和更新中的更改

也许是这样的：

ArtLogDataService.getArtLogView().then(function() {
    $scope.$apply();
});

// Create or acquire the manager ONCE for the lifetime of your data service
// Todo: more testable to use a separate "entityManagerFactory" service
//       to get your manager.
var manager = new breeze.EntityManager('breeze/BreezeData');

var _getArtLogView = function () {

    return breeze.EntityQuery.from('ArtLogView')
                 .using(manager).execute()
                 .then(success)
                 .catch(fail); // only if you have something useful to do here when it fails

    function success(data) { return data.results; }

    function fail(error) { 
       // some kind of logging or useful error handling;
       // otherwise don't bother with fail here
       return $q.reject(error); // so caller sees it
    }
};

如果您从Angular内部执行所有操作，您永远不需要调用

$scope.$apply

，因为任何可能改变数据（事件、网络响应、超时等）的操作都将由Angular（通过

$http

和

$timeout

等）处理，

$apply

将自动调用。正是在这些情况下，数据被角度以外的事件更改，

$scope.$apply

才是必要的

希望这能帮到你