不废话，直接上代码，请搜索 apply 为什需要在标准服务上掉呢。。。。
var app = angular.module('MyApp', ['ngResource','ngRoute','ngGrid']).config(function ($routeProvider) {
$routeProvider
.when('/store', {
templateUrl: 'page/store.html',
controller: ''
})
.when('/schema', {
templateUrl: 'page/schema.html',
controller: ''
})
.when('/storeinfo', {
templateUrl: 'page/storeinfo.html',
controller: ''
})
});
var spacename ='';
app.controller('storeManage', function ($scope) {
$scope.storeView = true;
$scope.schemaView = false;
$scope.space = {name:"spaces",realname:""};
$scope.spaces = spaceModel;
$scope.$on("storeChange",
function (event, treeNode) {
$scope.storeView = true;
$scope.schemaView = false;
$scope.$broadcast("storeChangeFromParent", treeNode);
});
$scope.$on("schemaChange",
function(event,treeNode){
$scope.storeView = false;
$scope.schemaView = true;
$scope.$broadcast("schemaChangeFromParent",treeNode);
});
$scope.selectSpace=function(){
$("#spacemodal").modal();
}
$scope.saveSpace = function(){
$scope.space = $scope.tempSpace;
spacename = $scope.space.name;
}
$scope.cancelSpace = function(){
$scope.tempSpace = {};
}
});
app.controller('storeTreeController', function ($scope) {
});
app.controller('storeEdit',function($scope,$http,storeInstance,setMetaInstance,smeDeploySet,smeCreateSet,spaceSchema,StatusesConstant){
console.log("store controller init..........");
$scope.store = storeModel;
$scope.indexInfo = indexModel;
$scope.set = setModel;
$scope.listElement = listElementModel;
$scope.spaceSchemaList = spaceSchemaListModel;
$scope.isBaseSchema = false;
$scope.createStore = false;
$scope.createSetMeta = false;
$scope.firstShow = true;
$scope.secondShow = false;
console.log("show initial...............");
$scope.title = "查看数据集";
$scope.statuses = StatusesConstant;
$("#schematree").hide();
$("#storetree").show();
$("#storePanel").show();
$("#schemaPanel").hide();
$scope.$on("storeChangeFromParent", function (event, treeNode) {
if(treeNode.isParent == true){
$scope.title = "查看store";
$scope.firstShow = true;
$scope.secondShow = false;
$("#storePanel").show();
$("#schemaPanel").hide();
$scope.store = createStoreModel();
$scope.set = createSetModel();
$scope.$apply(
storeInstance.get({setName:treeNode.name}).$promise.then(
function(resolve){
$scope.store = resolve;
if(typeof($scope.store.entitySetName) == "undefined"){
alert("获取store出错");
}else{
setMetaInstance.get({setMetaName:treeNode.name}).$promise.then(
function(resolve){
$scope.set = resolve;
if(typeof($scope.set.setName)=="undefined"){
$scope.set = createSetModel();
$scope.set.setName = $scope.store.entitySetName;
$scope.createSetMeta = true;
}
},
function(reject){console.log("get SetMetadata failed"+reject)}
);
}
},
function(reject){console.log("get store failed")}
));
$scope.set.appSpaceId = $scope.space.realname;
$(".store_info").each(function(){
this.disabled = true;
});
}
});
$scope.createStore = function(){
$scope.store = createStoreModel();
$scope.set = createSetModel();
$scope.store.appSpaceId = $scope.space.realname;
$scope.store.entitySetName = $scope.space.realname+".";
$("input,select,textarea").each(function(){
this.disabled = false;
});
$scope.gridOptions.enableCellEdit = true;
$scope.isCreate = true;
$scope.firstShow = false;
$scope.secondShow = true;
$scope.title = "创建store";
}
$scope.cancelStore = function(){
$scope.firstShow = true;
$scope.secondShow = false;
$(".store_info").each(function(){
this.disabled = true;
});
$scope.title = "查看store";
}
$scope.createStoreTable = function(){
smeDeploySet.deploy(
{spaceName:$scope.space.realname},
function(data){
console.log("deploy success");
},
function(){
console.log("deploy failed");
});
}
$scope.editStore = function(){
if($scope.store.entitySetName == ''){
alert("请先选择一个store");
return;
}
$(".ex_store_info").each(function(){
this.disabled = false;
});
$scope.isCreate = false;
$scope.firstShow = false;
$scope.secondShow = true;
$scope.title = "编辑store";
$scope.firstShow = false;
$scope.secondShow = true;
$scope.gridOptions.enableCellEdit = true;
if($scope.set.entitySchemaList.length ==0){
$scope.createSetMeta = true;
}
};
$scope.saveStore = function(){
$scope.set.setName = $scope.store.entitySetName;
$scope.set.appSpaceId = $scope.space.realname;
if($scope.isCreate == true){
smeCreateSet.save({setName:$scope.store.entitySetName},$scope.store)
if(typeof($scope.set.entitySchemaList)!="undefined" && $scope.set.entitySchemaList.length > 0){
setMetaInstance.put({setMetaName:$scope.set.setName},$scope.set)
}
}
else{
storeInstance.save({setName:$scope.store.entitySetName},$scope.store);
if(typeof($scope.set.entitySchemaList)!="undefined" && $scope.set.entitySchemaList.length > 0 ){
if($scope.createSetMeta == true){
setMetaInstance.put({setMetaName:$scope.set.setName},$scope.set);
$scope.createSetMeta = false;
}else
setMetaInstance.save({setMetaName:$scope.set.setName},$scope.set);
}
}
$scope.firstShow = true;
$scope.secondShow = false;
$scope.createSetMeta = false;
$(".store_info").each(function(){
this.disabled = true;
});
$scope.title = "查看数据集";
}
$scope.createIndex = function(){
$("#input_index").show();
}
$scope.quitIndex = function(){
$scope.indexInfo = '';
$("#input_index").hide();
}
$scope.confirmIndex = function(){
$scope.store.index.push($scope.indexInfo);
$scope.indexInfo = null;
$("#input_index").hide();
}
$scope.delIndex = function(index){
$scope.store.index.splice(index,1);
};
$scope.createSchema = function(){
$("#input_schema").show();
var URL = "/MDE/DSE/EntitySchema?$filter=appSpace eq \'"+$scope.space.realname+"\'";
$http({
url:URL,
method:"GET"
}).success(function(data){
$scope.spaceSchemaList = data;
});
}
$scope.confirmSchema = function(){
var flag = true;
var tempList = $scope.set.entitySchemaList;
if(tempList.length > 1){
for(var i=0;i<tempList.length;i++){
if(tempList[i].schemaName == $scope.schemaName){
flag = false;
alert("schema already exist");
}
}
}
if(flag==true){
if($scope.isBaseSchema == "true"){
$scope.isBaseSchema = true;
}else{
$scope.isBaseSchema = false;
}
$scope.set.entitySchemaList.push({
id: $scope.set.entitySchemaList.length+1,
schemaName : $scope.schemaName,
isBaseSchema:$scope.isBaseSchema
}
);
$("#input_schema").hide();
}
}
$scope.quitSchema = function(){
$scope.listElement = null;
$("#input_schema").hide();
}
$scope.delSchema = function(index){
$scope.set.entitySchemaList.splice(index,1);
}
$scope.pkeyTypes =dataTypeModel;
$scope.storeTypes=storeTypeModel;
$scope.markTypes = markTypeModel;
$scope.indexTypes = dataTypeModel;
// $scope.testData=[{col1:"fuck1",col2:"fuck2",col3:2,col4:"fuck4",col5:"fuck5"},
// {col1:"fuck12",col2:"fuck22",col3:1,col4:"fuck24",col5:"fuck25"}];
$scope.editDFV = function(){
console.log("edit dfv");
}
$scope.deleteDFV = function(row){
$scope.store.defaultValues.remove(row.rowIndex);
}
$scope.selectCell ="<select ng-model='COL_FIELD' ng-class='\'colt\' + col.index' ng-input='COL_FIELD' ng-options='id as name for (id, name) in statuses' ng-blur='updateEntity(row)'></select>";
$scope.buttonCell = '<button class="btn btn-link" ng-click="deleteDFV(row)" ng-show="secondShow">删除</button>';
$scope.gridOptions = {
data: 'store.defaultValues',
enableCellEdit: true,
columnDefs: [{field: "name",displayName:"名称"},
{field:"dType",displayName:"类型", editableCellTemplate: $scope.selectCell ,cellFilter: 'mapStatus'},
{field:"defaultValue",displayName:"默认值"},
{field:"evalExp",displayName:"表达式"},
{displayName:"操作",cellTemplate:$scope.buttonCell, enableCellEdit: false}
]
};
$scope.createDefaultValue = function(){
// if(isNaN($scope.store.defaultValues))
$scope.store.defaultValues.unshift({name:null,dType:1,defaultValue:null,evalExp:null});
}
$scope.updateEntity = function(row) {
console.log("row",row);
};
$scope.displayDefaultValue= function(row){
console.log($scope.store.defaultValues);
}
});
app.directive('ngBlur', function () {
return function (scope, elem, attrs) {
elem.bind('blur', function () {
scope.$apply(attrs.ngBlur);
});
};
});
app.filter('mapStatus', function( StatusesConstant ) {
return function(input) {
if (StatusesConstant[input]) {
return StatusesConstant[input];
} else {
return 'unknown';
}
};
})
app.factory( 'StatusesConstant', function() {
return {
1: 'preset',
2: 'evaljs'
};
});
Array.prototype.remove=function(dx)
{
if(isNaN(dx)||dx>this.length){return false;}
for(var i=0,n=0;i<this.length;i++)
{
if(this[i]!=this[dx])
{
this[n++]=this[i]
}
}
this.length-=1
}
app.factory('storeInstance',['$http','$resource',function($http,$resource){
return $resource('/MDE/DSE/EntitySet(\':setName\')',
{setName:'@setName'},
{create:{method:'PUT'},params:{},isArray:false}
) ;
}]);
app.factory('setMetaInstance',function($http,$resource){
return $resource(
'/MDE/DSE/SetMetadata(\':setMetaName\')',
{setMetaName:'@setMetaName'},
{ put:{method:"PUT"}, params:{},isArray: false}
)
});
html
<div class="row">
<div class="col-md-3">
<div class="zTreeDemoBackground left" ng-controller="storeTreeController">
<ul storetree id="treeDemo" class="ztree" showIcon="showIconForTree"></ul>
</div>
</div>
<div ng-controller="storeEdit" id="storePanel" ng-show="storeView">
<div class="col-md-6">
<h4>{{title}}</h4>
<div class="panel panel-info" >
<div class="panel-heading ">
数据集管理
<button type="button" class="btn btn-primary btn-sm" ng-click="createStore()" ng-show="firstShow">新增</button>
<button type="button" class="btn btn-primary btn-sm" ng-click="editStore()" ng-show="firstShow" >修改</button>
<button type="button" class="btn btn-primary btn-sm" ng-click="saveStore()" ng-show="secondShow">保存</button>
<button type="button" class="btn btn-primary btn-sm" ng-click="cancelStore()" ng-show="secondShow" >取消</button>
<button type="button" class="btn btn-primary btn-sm" ng-click="createStoreTable()" ng-show="firstShow">发布</button>
</div>
<div class="panel-body">
<div class="panel panel-info">
<div class="panel-heading">
数据集基础信息
</div>
<div class="form-horizontal panel-body " style="padding-top: 40px;">
<div class="form-group " role="form" >
<label class="col-md-2 control-label">数据集名称</label>
<div class=" col-md-4">
<input type="text" class="form-control store_info" ng-model="store.entitySetName">
</div>
<label class="col-md-2 control-label">AppSpaceId</label>
<div class="col-md-4">
<input type="text" class="form-control store_info" ng-model="store.appSpaceId">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">主键</label>
<div class="col-md-4">
<input type="text" class="form-control store_info ex_store_info" ng-model="store.pKey">
</div>
<label class="col-md-2 control-label">主键类型</label>
<div class="col-md-4">
<select ng-model="store.pkeyType" ng-options="o.id as o.name for o in pkeyTypes" class="form-control store_info ex_store_info">
<option >-- 请选择 --</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">存储类型</label>
<div class="col-md-4">
<select ng-model="store._storageType" ng-options="o.id as o.name for o in storeTypes" class="form-control store_info ex_store_info">
<option >-- 请选择 --</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">描述</label>
<div class="col-md-4">
<textarea class="form-control store_info ex_store_info" ng-model="store.description"></textarea>
</div>
</div>
</div>
<div class="panel panel-info" style="padding-top: 20px;">
<div class="panel-heading">
索引信息
<button type="button" class="btn btn-primary btn-sm" ng-click="createIndex()" ng-show="secondShow">新增索引</button>
</div><!-- panel-heading-->
<div class="panel-body" >
<table class="table display_table" >
<col width="8%" />
<col width="15%" />
<col width="10%" />
<col width="15%" />
<col width="20%" />
<col width="20%" />
<col width="15%" />
<thead>
<tr>
<td>编号</td>
<td>索引名称</td>
<td>直接索引</td>
<td>markType</td>
<td>索引类型</td>
<td>表达式</td>
<td>   </td>
</tr>
</thead>
<tbody>
<tr id="input_index" style="display:none">
<td>
</td>
<td ><div><input type="text" ng-model="indexInfo.path" ></input></div></td>
<td ><div><input type="text" ng-model="indexInfo.direct" ></input></div></td>
<td ><select ng-model="indexInfo.markType " ng-options="o.id as o.name for o in markTypes" >
<option ></option>
</select>
</td>
<td >
<select ng-model="indexInfo.indexDataType" class="selectdatatype" ng-options="o.id as o.name for o in indexTypes" >
<option ></option>
</select>
</td>
<td ><input type="text" ng-model="indexInfo.expression" ></input></td>
<td ><button type="button" class="btn btn-primary btn-sm"
ng-click=" confirmIndex()">确认</button>
<button type="button" class="btn btn-primary btn-sm"
ng-click="quitIndex()">取消</button>
</td>
</tr>
<tr ng-repeat="o in store.index">
<td>{{$index+1}}</td>
<td>{{o.path}}</td>
<td>{{o.direct}}</td>
<td ><select ng-model="o.markType" ng-options="o.id as o.name for o in markTypes" disabled="disabled">
<option ></option>
</select>
</td>
<td >
<select ng-model="o.indexDataType" class="selectdatatype" ng-options="o.id as o.name for o in indexTypes" disabled="disabled">
<option ></option>
</select>
</td>
<td>{{o.expression}}</td>
<td>
<button type="button" class="btn btn-link btn-sm" ng-show="secondShow" ng-click="delIndex($index)">删除</button>
</td>
</tr>
</tbody>
</table>
</div><!-- /.panel-body-->
</div><!--panel-->
<div class="panel panel-info" style="padding-top: 20px;" >
<div class="panel-heading">
默认值信息
<button type="button" class="btn btn-primary btn-sm" ng-click="createDefaultValue()" ng-show="secondShow">新增默认值</button>
</div>
<div>
</div>
<div class="panel-body">
<div class="gridStyle" ng-grid="gridOptions"></div>
</div>
</div>
</div>
</div>
</div><!--mid-panel-->
</div> <!--col-md-6-->
<div class="col-md-3" ng-show="storeView">
<div class="panel panel-info" >
<div class="panel-heading">
所含Schema
<button type="button" class="btn btn-primary btn-sm" ng-click="createSchema()" ng-show="secondShow">添加Schema</button>
</div>
<div class="panel-body">
<table class="table display_table">
<col width="10%" />
<col width="50%" />
<col width="20%" />
<col width="20%" />
<thead>
<tr>
<td> </td>
<td>schema名称</td>
<td>baseSchema</td>
<td>   </td>
</tr>
</thead>
<tr id="input_schema" style="display:none">
<td></td>
<td >
<select class="selectdatatype" ng-model="schemaName" >
<option ng-repeat = "o in spaceSchemaList">{{o.id}}</option>
</select>
</td>
<td>
<select ng-model="isBaseSchema">
<option value="true">是</option>
<option value="false">否</option>
</select>
</td>
<td ><button type="button" class="btn btn-link"
ng-click=" confirmSchema()">确认</button>
<button type="button" class="btn btn-link"
ng-click="quitSchema()">取消</button>
</td>
</tr>
<tr ng-repeat="o in set.entitySchemaList">
<td>{{$index+1}}</td>
<td>{{o.schemaName}}</td>
<td>{{o.isBaseSchema}}</td>
<td>
<button type="button" class="btn btn-link" ng-click="delSchema($index)" ng-show="secondShow">删除</button>
</td>
</tr>
</table>
</div>
</div>
</div><!--right-bar-->
</div>
<div ng-controller="schemaEdit" id = "schemaPanel" ng-show="schemaView" >
<div class="col-md-8">
<div class="panel panel-info">
<div class="panel-heading">
实体元数据
</div>
<div class="panel-body">
<div class="panel panel-info">
<div class="panel-heading">
基本信息
</div>
<div class="panel-body">
<div class="form-horizontal panel-body" style="padding-top: 40px;">
<div class="form-group" >
<label class="col-md-2 control-label">id</label>
<div class="col-md-4">
<input type="text" class="form-control schema_info" ng-model="schema.id">
</div>
<label class="col-md-2 control-label">AppSpaceId</label>
<div class="col-md-4">
<input type="text" class="form-control schema_info" ng-model="schema.appSpaceId">
</div>
</div><!--form-group-->
<div class="form-group">
<label class="col-md-2 control-label">实体集名称</label>
<div class="col-md-4">
<input type="text" class="form-control schema_info" ng-model="schema.entitySetName">
</div>
<label class="col-md-2 control-label">对象名</label>
<div class="col-md-4">
<input type="text" class="form-control schema_info" ng-model="schema.entityName">
</div>
</div><!--form-group-->
<div class="form-group">
<label class="col-md-2 control-label">版本</label>
<div class="col-md-4">
<input type="text" class="form-control schema_info" ng-model="schema.version">
</div>
</div><!--form-group-->
<div class="form-group">
<label class="col-md-2 control-label">描述</label>
<div class="col-md-4">
<textarea class="form-control schema_info" ng-model="schema.description"></textarea>
</div>
</div><!--form-group-->
</div><!--form-->
</div><!--panel body-->
<div class="panel panel-info">
<div class="panel-heading">
详细信息
</div>
<div class="panel-body">
<table class="table schema_table">
<col width="20%" />
<col width="15%" />
<col width="20%" />
<col width="20%" />
<col width="10%"/>
<col width="15%"/>
<thead>
<tr>
<td>名称</td>
<td>pType</td>
<td>复杂类型</td>
<td>校验规则</td>
<td>是否array</td>
<td>  </td>
</tr>
</thead>
<tbody>
<tr id="input_property" ng-show='propertyShow'>
<td ><input type="text" ng-model="property.name" ></input></td>
<td ><input type="text" ng-model="property.pType" ></input></td>
<td ><input type="text" ng-model="property.complexTypeName" ></input></td>
<td ><input type="text" ng-model="property.verificationRegEx" ></input></td>
</tr>
<tr ng-repeat="o in schema.properties">
<td>{{o.name}}</td>
<td><select ng-model="o.pType" ng-options="o.id as o.name for o in propertiesType" disabled="disabled">
<option ></option>
</select></td>
<td>{{o.complexTypeName}}</td>
<td>{{o.verificationRegEx}}</td>
<td>{{o.isArray}}</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
相关推荐
本文实例总结了AngularJS中$apply方法和$watch方法用法。分享给大家供大家参考，具体如下： 引言 最近在项目中封装控件的时候用到了$watch方法来监听module中的值的变化，当时小编对这个方法不是很了解，所以在网上...
`$apply`是AngularJS提供的一个方法，它的主要作用是将外部的JavaScript代码带入AngularJS的上下文中，以便执行脏检查和更新视图。当你在Angular之外的地方（如事件处理函数、定时器或Ajax回调）修改了模型时，需要...
本文实例分析了AngularJS报错$apply already in progress的解决方法。分享给大家供大家参考，具体如下： 如果我们使用了AngularJS中的$scope.$apply()或者$scope.$digest()，我们很可能会遇到类似下面的错误，虽然这...
总结来说，AngularJS的$apply()方法是一个非常有用的工具，它可以帮助开发者在AngularJS之外的代码中手动触发脏检查机制。通过理解$apply()，开发者可以更加高效地管理数据和视图之间的同步，构建出响应迅速且用户...
├最新AngularJS开发宝典—第061讲 使用$scope.$apply进行数据脏检查.mp4 ├最新AngularJS开发宝典—第062讲 $timeout与$interval实际使用场景分析与实例讲解.mp4 ├最新AngularJS开发宝典—第063讲 $window服务的...
然而，过度依赖DOM操作可能导致性能问题，应谨慎使用`$compile`服务和`$apply`方法。 **9. 指令** 指令是AngularJS中的强大特性，允许我们扩展HTML的功能。例如，`ngRepeat`用于迭代数组，`ngIf`控制元素的显示隐藏...
- **属性和方法**：Scope对象拥有多种属性和方法，如 `$watch`、`$digest` 和 `$apply` 等，它们用于监控数据变化、执行数据绑定和更新视图。 ##### 2. $watch与$digest - **$watch**：用于监听Scope中某个表达式...
另外，可以使用`$timeout`或`$apply`确保AngularJS的脏检查机制能正确更新视图。 8. **示例代码**： ``` angular.module('myApp').directive('echartsRadar', function() { return { restrict: 'E', scope: { ...
- **CDN**：最简单的方法是从 CDN 下载最新的 AngularJS 文件并引入到项目中。 - **npm**：使用 npm 安装 AngularJS，适用于 Node.js 项目。 - **Bower**：如果项目使用 Bower 作为包管理器，可以通过 Bower 来安装 ...
scope.$apply(function() { ngModelCtrl.$setViewValue(dateText); }); } }); ngModelCtrl.$render = function() { $datepicker.datepicker('setDate', ngModelCtrl.$viewValue || ''); }; // 处理模型值...
$eval用于在作用域上下文中执行代码，$apply用于将外部代码与$digest循环集成，而$evalAsync则提供了延迟执行的功能。 在作用域继承方面，需要了解如何创建子作用域，子作用域如何继承父作用域的属性，以及如何处理...
在AngularJS的控制器中，我们可以添加一个方法来处理预览： ```javascript $scope.uploadImage = function(files) { if (files && files.length > 0) { var file = files[0]; var reader = new FileReader(); ...
- `$apply`: 当在AngularJS外部（比如JavaScript事件处理函数）修改了作用域中的数据时，需要调用`$apply`来触发`$digest`循环。例如，`$scope.$apply(function() { $scope.myVariable = newValue; })`。 **作用域...
使用`$q`服务和`$scope.$apply()`来处理回调函数，确保异步操作完成后正确更新视图。 10. 不使用AngularJS的最佳实践和社区工具： 社区提供了许多工具和最佳实践，如Angular-CLI、Grunt/Gulp工作流、Bower或npm包...
10. **性能优化**：包括延迟加载、指令优化、使用$apply谨慎地触发脏检查等技巧，提高应用性能。 在实际项目中，你需要结合这些知识点，通过阅读代码和执行示例，理解AngularJS的工作原理，学习如何将它们应用到...
今天，我们要聊得是Angularjs中的小明星$apply。当我们数据更新了，但是view层却没反应时，总能听到有人说，用apply吧，然后，懵懂无知的我们，在赋值代码后面加了$scope.$apply() ,然后就惊喜的发现。噢，真的更新...
3. **性能优化**：了解如何避免脏检查带来的性能问题，使用$digest和$apply的正确方法。 4. **AOT编译与懒加载**：理解预编译和懒加载的概念，提升应用的加载速度。 总的来说，AngularJS提供了一种高效、可维护的...