在推送 Breeze 实体后更新另一个控制器作用域中的角度指令

Question

我正在用Breeze和TypeScript构建一个Angular SPA。

问题是我在SQL Server中的表键列上使用newsequentialid()，因此如果没有首先生成行 ID，我就无法创建具有 Breeze(或LINQ to EF(的实体。

在客户端，我将$http.post的新实体数据发布到Web API，该调用SQL server中的stored procedure，该返回带有 OUTPUT inserted.Id 的新 ID。然后Web API将新创建的顺序 ID 返回到Angular app，更新新Breeze实体的 ID。然后，我必须将新Breeze entity推到现有Array of Breeze entities上。

我directives隔离范围(与引用类型的 2 向绑定(，它们都根据页面上许多角度controller模块之间的共享依赖项中的值更新计算。许多controllers共享array of Breeze entities的状态，特别是工资行。directives必须显示这些行的聚合计算，并在创建、删除或更新工资单项目时进行更新。 当我更改行字段中的值时，所有directive计算都会正确更新。但是当我在shared array中添加或删除Breeze实体时，我无法更新计算。我缺少的Breeze框架是否有一些东西会在添加/删除时触发directives更新？我不想依赖$broadcast或$emit - 这似乎是一种反模式，并且在整个应用程序中变得非常重复。谢谢。

这是我在数据库中创建新的员工预算项目的方法。Web API 返回一个新的顺序 ID，用于设置 Breeze 实体的主键的值。

createEmployeeBudget(employeeBudget: IEmployeeBudget, employeeBudgets: Array<IEmployeeBudget>): void {
            this.$http.post(this.config.remoteServiceName + EmployeeBudget.getApiCreateMethod(), JSON.stringify(employeeBudget)).then(
                (response: ng.IHttpPromiseCallbackArg<Response<string>>): void => {
                    var data = response.data;
                    if (data.error != null) {
                        this.logError(data.error);
                    } else {
                        var newId = data.data; //new sequential Guid from Web API
                        employeeBudget.EmployeeBudgetId = newId; //add new sequential ID to entity
                        var entity = this.manager.createEntity(EmployeeBudget.getType(), employeeBudget); //create the entity the Breeze way
                        employeeBudgets.push(<any>this.manager.addEntity(entity)); //push Breeze entity onto exsisting array of Breeze entities
                        this.logSuccess("Added new " + EmployeeBudget.getDisplayName() + ".");
                    }
                });
        }
    // a formula directive
    app.directive('budgetBalance', ['formulas', function (formulas: Services.IFormulaService) {
            return {
                restrict: 'EA',
                scope: {
                    services: '=services',
                    budget: '=budget',
                    benefits: '=employeeBenefits',
                    ess: '=employerSupportServices',
                    emps: '=employeeBudgets'
                },
                link: function (scope, elem, attr): void {
                    scope.$watch(function (scope) {
                        scope.total = formulas.getBudgetBalance(scope.services, scope.budget, scope.benefits, scope.ess, scope.emps);
                    });
                }
                , template: '{{total | currency}}'
            };
        }]);

Answer 1

我解决了自己的问题。我的问题不是微风问题，而是 Angular 范围问题。我有一个家长视图，有很多子ui-views。我需要通过 UI 路由器的依赖注入在所有子控制器之间共享公共依赖关系。在未能更新同级控制器中的数组范围后，我尝试将依赖项注入父 shell 控制器并在所有子控制器和指令中继承父范围的变量。

成功了！现在，我可以保证所有子控制器和指令共享和监视相同的引用。这不是我所追求的依赖注入的理想状态。在这种情况下，这是一个相当小但必要的妥协。

这是视图和控制器的简化版本。我有大约 8 个复杂实体数组，我正在所有子控制器之间共享。

UI 路由器state声明

$stateProvider
    .state('budget', {
        url: '/budget/:budgetId',
        templateUrl: "/app/budget/budgetshell.html",
        controller: Controllers.BudgetShellController.Id,
        controllerAs: "vm",
        // Dependencies - these are Promises
        resolve: {
            budget: ['$stateParams', 'datacontext', function ($stateParams: IAppStateParams, datacontext: Services.IDatacontext) {
                return datacontext.getBudget($stateParams.budgetId);
            }],
            employeeBudgetItems: ['$stateParams', 'datacontext', function ($stateParams: IAppStateParams, datacontext: Services.IDatacontext) {
                return datacontext.getEmployeeBudgets($stateParams.budgetId);
            }]
        },  
        // child views
        views: {
            'budget@budget': Views.budget,
            'employeebudgets@budget': Views.employeeBudgets,
            'budgettotals@budget': Views.budgetTotals
        }
    });

带有 UI 视图的控制器 HTML 模板：

<div>
    <div ui-view="budget"></div>
    <!-- more child ui-views are here -->
    <!-- Budget Totals/Payroll Expense and Breakdown Totals -->
    <div ui-view="budgettotals"></div>
</div>

依赖项注入到BudgetShellController中，与其子控制器和指令公开共享它们。

module App.Controllers {
    export interface IBudgetShellController {
        budget: IBudget;
        employeeBudgetItems: Array<IEmployeeBudget>;
        /* more dependencies here */
    }
    export class BudgetShellController implements IBudgetShellController {  
        static Id: string = 'budgetShellController';
        // public dependencies accessible by child controllers and directives
        public budget: IBudget;
        public employeeBudgetItems: Array<IEmployeeBudget>;
        // inject dependencies from data service
        static $inject = ['budget', 'employeeBudgetItems'];
        constructor(budget: IBudget, employeeBudgetItems: Array<IEmployeeBudget>){
            this.budget = budget;
            this.employeeBudgetItems = employeeBudgetItems;
        }
   }
    app.controller(BudgetShellController.Id, BudgetShellController);
}

具有计算父控制器作用域变量总计的指令的子控制器：

module App.Controllers {
    export class BudgetTotalsController {   
        static Id: string = 'budgetTotalsController';   
        private budget: IBudget;
        private employeeBudgetItems: Array<IEmployeeBudget>;
        static $inject = ['$scope'];
        constructor(private $scope: any)
        {
            // reference parent scope variables
            // totals always update when adding/deleting from arrays
            var parent = <IBudgetShellController>$scope.$parent.vm;
            this.budget = parent.budget;         
            this.employeeBudgetItems = parent.employeeBudgetItems;
        }
    }
    app.controller(BudgetTotalsController.Id, BudgetTotalsController);
}