1.基本功能 1.基本功能
- 提升二次开发JS (xxxCtrl.js) 的扩展能力
- 保持原有 controller 继承的功能(controller继承、方法重写、自定义方法等)
2.配置方法 2.配置方法
2.1. 自定义 html 内容扩展 2.1. 自定义 html 内容扩展
- 对象建模-业务对象-可视化布局：在可视化拖拽一个DIV，然后将其的页面布局元素类型修改为
TEMPLATE类型容器，在布局元素名称中填写值对应为template-key中的值，如果不填写则默认取栅格名称的值作为template-key中的值。
- 引入html代码的方式有两种。如果是引入的内容不多建议采用方式一直接在平台可视化界面配置。如果引入的html片段比较多，建议采用引入模板文件方式引入。
方式一：直接在平台可视化界面配置
- 则此时可以在【页面布局属性】中写入需要引入的html结构],例如下面的html结构。
<span class="cust-stateofvessel-rs-color" style="font-size: 20px;">{{PlanMaini18n.PlanMain_BMS_TING_FENG}}:</span>
<span class="cust-stateofvessel-rs" style="
height: 20px;
width: 70px;
background-color: red;
display: inline-block;"></span>
方式二：通过引入一份模板文件方式引入
- 在本地工程中写入一个文件模板。此处例子文件名为
ttt-www\ttt-bms-www\static\app\plan\planmain\custom\planMainPlanCustomAdd.html，且其内容为下面所示内容。注意其中的【key="planMainAdd"】。
<template key="planMainAdd">
<span class="cust-stateofvessel-add-color" style="
font-size: 20px;">{{PlanMaini18n.PlanMain_BMS_ADD_PLAN}}:</span>
<span class="cust-stateofvessel-add" style="
height: 20px;
width: 70px;
background-color: green;
display: inline-block;"></span>
</template>
- 在业务对象中可视化拖拽一个模板文件。给对应的模板指定
template-key，此处的key值需要和上面的key保持一致。
- 生成前端代码。在二次开发文件中引入对应的页面。首先需要引入模板文件，格式为【text!+相对当前二次开发js文件的路径地址】。然后指定其变量名称。例如：生成的二次开发文件路径为：
ttt-www\ttt-bms-www\static\app\plan\planmain\planMainPlanManageBsCtrl.js，模板文件路径为：ttt-www\ttt-bms-www\static\app\plan\planmain\custom\planMainPlanCustomAdd.html。例如下面代码中的【text!./custom/planMainPlanCustomAdd.html和planMainPlanCustomAdd】。
- 接着需要调用
getTemplateData方法，将上面指定的变量作为参数传入，getTemplateData(planMainPlanCustomAdd);。 - 配置TEMPLATE后，二次开发文件会默认生成
getTemplateData方法定义，也可以手动拷贝下面代码。
function getTemplateData(tmplTxt){
var tmpls = {};
$(tmplTxt).filter('template').each(function(i, template) {
tmpls[$(template).attr('key')] = template.innerHTML;
});
$('.template-content').each(function(i, el) {
var $el = $(el);
var templateKey = $el.attr('template-key');
var tmpl = tmpls[templateKey] || '';
$el.append(tmpl);
});
}
2.2. 支持引入第三方控件2.2. 支持引入第三方控件
- 在页面入口js的module处会生成depModules。例如：
.concat(testLixq101ManageCtrl.depModules || [])) - 在二次开发文件中会生成如下代码。此代码也可以手工输入。
depModules:[”], //额外添加依赖 angular 模块 -
在工程中引入第三方控件的js，例如此处例子文件名为
myModule.js，文件放置路劲改为\WebContent\static\app\custJs\myModule.js，文件内容为:
define(['angular'], function (angular) {
var myModule = angular.module('MyModule', []);
myModule.directive('myHelloWorld', function () {
return {
restrict: 'E',
scope: {
name: '@'
},
template: '<h1 ng-click="toggle()">{{getName() | myHelloFilter}}</h1>',
link: function (scope) {
scope.show = true;
scope.toggle = function () {
scope.show = !scope.show;
};
scope.getName = function () {
if (scope.show) {
return scope.name;
}
return scope.name ? '*****' : null;
};
}
};
}).filter("myHelloFilter", function () {
return function (input) {
if (input) {
return '你好, ' + input;
}
return '呵呵';
};
}).factory('myHelloService', function () {
var service = {};
service.hello = function (name) {
alert('你好, ' + name);
};
return service;
});
});
- 在二次开发文件中引入此js文件，如下面的
custJs/myModule代码。
define([
'angular',
'underscore',
'sample/test/testLixq101ManageBsCtrl',
'text!./custTemplate/testLixq101Template.html', // 自定义 html 内容模板
'custJs/myModule',
'service/utils'
], function (angular, _, testLixq101ManageBsCtrl,testLixq101Template) {
- 在depModules中引入
MyModule模块。
/* 额外添加依赖 angular 模块 */
depModules:['MyModule'],
- 例子中myModule中定义了指令
myHelloWorld，具体可以见上图代码。 - 在引入html文件中加入了
my-hello-world指令。
<div class="col-xs-6">
<my-hello-world name="世界"></my-hello-world>
</div>
- 此时界面的效果如下，界面中引入了控件中的内容。
2.3. 支持页面module的扩展2.3. 支持页面module的扩展
- 在Ctrl.js 中添加 moduleExt 方法，接收 module 参数。
/*
* 模块扩展回调方法，在此处添加自定义指令，服务，过滤器等
* @param {*} module 当前页面 module
*/
moduleExt:function(module){
}
- 页面入口 js 处调用 moduleExt 方法，传入页面的 module 作方参数。
testLixq101ManageCtrl.moduleExt && testLixq101ManageCtrl.moduleExt(module);
- 此时可以在Ctrl.js 的 moduleExt 方法内，可以对 module 进行扩展，添加自定义的指令、服务、过滤器等内容。 例如：
/*
* 模块扩展回调方法，在此处添加自定义指令，服务，过滤器等
* @param {*} module 当前页面 module
*/
moduleExt:function(module){
// eg: 自定义指令
module.directive('helloWorld', function() {
return {
restrict: 'E',
scope: {
name: '@'
},
template: '<h1 ng-click="toggle()">{{getName() | helloFilter}}</h1>',
link: function(scope) {
scope.show = true;
scope.toggle = function() {
scope.show = !scope.show;
};
scope.getName = function() {
if (scope.show) {
return scope.name;
}
return scope.name ? '哈哈哈' : null;
};
}
};
});
// eg: 自定义过滤器
module.filter("helloFilter", function () {
return function (input) {
if (input) {
return 'Hello, ' + input;
}
return 'Hehe';
};
});
// eg: 自定义服务
module.factory('helloService', function() {
var service = {};
service.hello = function(name) {
alert('Hello, ' + name);
};
return service;
});
}
- 此时可以配合扩展的html代码，
<div class="col-xs-6">
<my-hello-world name="世界"></my-hello-world>
</div>
- 此时界面效果如下图所示。
2.4. 补充说明2.4. 补充说明
- 在次版本上的二次开发文档的结构有调整，原先写自定义方法的位置在如下位置。比如例子中的
customThree和controlOneTestSysStBooking方法
var ctrlOpts ={
/* 扩展 controller */
ctrl:(function(){
var Controller = inherit(function (options) {
testLixq101ManageBsCtrl.call(this, options);
this.scope.customThree = function () {
alert("请配置方法实现");
};
this.scope.controlOneTestSysStBooking = function (aa, bb, cc) {
alert('dfd');
};
},testLixq101ManageBsCtrl);
3.常用扩展 3.常用扩展
4.版本更新 4.版本更新
5.7.0，2019.05.27
优化