Angularjs 推送Breeze实体后更新另一控制器作用域中的角度指令
我正在用Angularjs 推送Breeze实体后更新另一控制器作用域中的角度指令,angularjs,breeze,Angularjs,Breeze,我正在用Breeze和TypeScript构建一个Angular SPA 问题是，我在SQL Server中的表键列上使用newsequentialid（），因此，如果不先生成行ID，我就无法使用Breeze（或LINQtoEF）创建实体 在客户端，我使用$http.post将新实体数据发布到webapi中，该API调用sqlserver中的存储过程，该存储过程返回新ID，并输出inserted.ID。Web API然后将新创建的顺序ID返回到Angular app，更新新的Breeze实体ID
BreezeTypeScriptAngular SPASQL Servernewsequentialid（）BreezeLINQEF$http.postwebapisqlserver存储过程，该存储过程返回新ID，并输出inserted.ID
。Web API
然后将新创建的顺序ID返回到Angular app
，更新新的Breeze
实体ID。然后，我必须将新的Breeze实体
推送到现有的Breeze实体数组
我有指令
，具有隔离作用域（与引用类型的双向绑定），所有这些指令都基于页面上多个角度控制器
模块之间的共享依赖项中的值更新计算。许多控制器
共享Breeze实体的数组的状态
，尤其是工资单行。指令
必须显示这些行的合计计算，并在创建、删除或更新薪资项目时更新。当我更改行字段中的值时，所有指令
计算都会正确更新。但是，当我在共享数组
中添加或删除Breeze
实体时，无法更新计算。我缺少的Breeze
框架是否会在添加/删除时触发指令
更新？我不想依赖$broadcast
或$emit
——这似乎是一种反模式，在整个应用程序中变得非常重复。多谢各位
这是我在数据库中创建新员工预算项目的方法。WebAPI返回一个新的顺序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}}'
};
}]);
createEmployeeBudget（employeeBudget:IEEmployeeBudget，employeeBudgets:Array）：无效{
这是.http.post（this.config.remoteServiceName+EmployeeBudget.getApiCreateMethod（），JSON.stringify（EmployeeBudget））。然后(
（响应：ng.ihttpromisecallbackarg）：void=>{
var数据=响应数据；
if（data.error！=null）{
这个.logError（data.error）；
}否则{
var newId=data.data；//来自Web API的新顺序Guid
employeeBudget.EmployeeBudgetId=newId；//向实体添加新的顺序ID
var entity=this.manager.createEntity（EmployeeBudget.getType（），EmployeeBudget）；//按如下方式创建实体
employeeBudgets.push（this.manager.addEntity（entity））；//将Breeze实体推送到现有的Breeze实体数组上
this.logSuccess（“添加新“+EmployeeBudget.getDisplayName（）+”）；
}
});
}
//公式指令
应用程序指令（'budgetBalance'，['formulas'，函数（公式：Services.IFormulaService）{
返回{
限制：“EA”，
范围：{
服务：'=服务'，
预算：'=预算'，
福利：'=员工福利'，
ess:“=员工支持服务”，
EMP:“=员工预算”
},
链接：功能（范围、元素、属性）：无效{
范围$watch（功能（范围）{
scope.total=formulas.getBudgetBalance（scope.services、scope.budget、scope.benefits、scope.ess、scope.emps）；
});
}
，模板：“{total | currency}}”
};
}]);
我解决了自己的问题。我的问题不是简单的问题，而是角度范围的问题。我有一个包含许多子ui视图的父视图
。我需要通过UI路由器的依赖项注入在所有子控制器之间共享公共依赖项。在更新同级控制器中数组的作用域失败后，我尝试将依赖项注入父shell控制器，并在所有子控制器和指令中继承父作用域的变量
成功了！现在，我可以保证所有子控制器和指令都共享和监视相同的引用。这不是我想要的依赖注入的理想状态。在这种情况下，这是一个相当小但必要的妥协
这是视图和控制器的简化版本。我在所有子控制器之间共享大约8个复杂实体数组
UI路由器状态
声明
$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视图的My controller 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>
具有计算父控制器范围变量总数的指令的子控制器：
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);
}
模块应用程序控制器{
导出类BudgetTotalsController{
静态Id:string='budgetTotalsController'；
私人预算：IBudget；
私有employeeBudgetItems：数组；
静态$inject=['$scope']；
构造函数（私有$scope:any）
{
//引用父范围变量
//从阵列添加/删除时，总计始终更新
var parent=$scope.$parent.vm；
this.budget=parent.budget；
this.employeeBudgetItems=父级.employeeBudgetItems；
}
}
应用程序控制器（BudgetTotalsController.Id，BudgetTotalsController）；
}
我解决了自己的问题。我的问题不是简单的问题，而是角度范围的问题。我有一个包含许多子ui vie的父视图
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);
}