html5自定义属性怎么用data-bind=

html-css05

html5自定义属性怎么用data-bind=,第1张

在jQuery的attr与prop提到过在IE9之前版本中如果使用property不当会造成内存泄露问题,而且关于Attribute和Property的区别也让人十分头痛,在HTML5中添加了data-*的方式来自定义属性,所谓data-*实际上上就是data-前缀加上自定义的属性名,使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状。

用{{}}是一定没法输出html的

不知道你项目里是怎么限制的不能使用 ng-bind-html

那你试试自己写个指令来实现一下好了

var app = angular.model('app' , [])

app.directive('stringHtml' , function(){

  return function(scope , el , attr){

    if(attr.stringHtml){

      scope.$watch(attr.stringHtml , function(html){

        el.html(html || '')//更新html内容

      })

    }

  }

})

app.controller('TestCtrl' , function($scope){

  $scope.string = '<button type="button">测试html按钮</button>'

})

html:

<div ng-controller="TestCtrl">

  <span string-html="string"></span>

</div>

1 初始化加载状态

Data组件上有两个关于初始化加载状态属性:autoLoad、autoNew,表示当功能页面打开后data组件的状态,两个属性是互斥的;

当autoLoad=true时,Data组件在model的onModelConstructing时执行open操作,当autoNew=true时,Data组件在model的

onModelConstructing时执行newData操作;

注:data定义的静态数据需要autoLoad=true才进行加载,否则需要主动调用open方法加载;

2 Data组件相互依赖时候注意顺序

Data1依赖Data2的时候,注意Data2要放在Data1前面;可以在Model组件中拖动;

3 Data组件不仅可以感知数值,还可以感知数据类型;

比如:input组件绑定的是Date型,input组件点击后会显示日期选择框;

4 规则表达式,以“js:”开头;

5 环境变量

$model:当前页面模型对象;

$data:当前数据对象;

$row:当前行对象;

$col:当前列名;

$rowID:当前行ID;

上下文对象

表达式上下文的实现机制:基于JS的with语句

数据集规则:$data;

字段规则:$row;

6 Data组件可以直接使用“$model.xxxData”直接访问;

注意:在Data构造方法内,不允许出现this.xxxData=xxx否则,会冲突!

7 ref、val、label区别

ref:绑定数据组件,返回可监控对象;

val:返回数值,用于表达式计算;

label:返回列的显示名称;

Data和Data.Row上都存在ref、val、label三个方法,区别:

Data:

Data.ref(col, row)

Data.val(col, row)

Data.label(col)

Data.Row:

Row.ref(col)

Row.val(col, value)

Row.label(col)

8 表达式中的聚合函数

number data.count(function filterCallback)

number data.sum(string column, function filterCallback)

number data.avg(string column, function filterCallback)

number data.min(string column, function filterCallback)

number data.max(string column, function filterCallback)

9 在表达式中使用的JS对象和函数

可以使用任何“可以访问到的JS对象和函数”

JS全局函数和对象;

window对象;

jQuery:$=window.$;

justep工具类:justep=window.justep;

环境变量:$model, $data, $row……;

获取页面组件

获取当前页面上的X5组件对象:$model.comp(xid|element);

获取当前页面上的HTML原生对象:$model.getElementByXid(xid);

基于$model自定义JS函数

自定义函数:在页面的JS文件中,为Model增加函数,通过$model访问;

自定义函数库:在页面的JS文件中,引入JS函数库,将函数库对象设置为Model变量,通过$model访问;

10 绑定表达式

环境变量

$model:当前页面模型对象;

$element:当前HTML元素对象;

$index:当前行索引,仅当组件在list或foreach内有效(注意,$index是一个函数);

$object:当前上下文对象;

bind-ref、bind-labelRef:绑定数据列的ref感知对象;针对x5的组件,双向数据感知;能感知数据类型,比如string、number、

date,会做类型校验;

其他数据绑定(多用于HTML原生组件)

bind-value:适用于input、password、select、textarea;单向感知;

bind-checked:适用于checkbox、radio;

bind-text:适用于span、label、em;

面向数据编程:编程重心在数据上,而不是在视图上;

11 状态相关绑定(boolean表达式)

bind-visible:显示;

bind-hasFocus:是否获得输入焦点;

bind-enabled:可用;

bind-disabled:禁用(优先);

12 绑定样式(JSON表达式)

bind-style: {'backgroundColor':

foodData.val('fPrice')>30?'red':null}

bind-css: {'text-danger':foodData.val('fPrice')>30}

13 其他HTML属性绑定

bind-attr-src:

bind-attr-href:

bind-attr-title

bind-attr-xxxx

14 控制类数据绑定

bind-if:当前组件的内容是否创建;

bind-ifnot:同上;

bind-with:指定内部组件绑定表达式的上下文对象($object);

bind-foreach:按指定可监控数组中的数据项,创建多份组件内容,每一份组件内容的上下文对象分别对应数组的每一个数据项;

15 其他绑定

bind-html:动态创建innerHTML;

bind-uniqueName:动态创建唯一的name;

16 过滤表达式

List的filter属性过滤可显示的数据项;

17 事件编程

event.bindingContext

$object:model、row或其他

在list组件内:$object=row

在bind-with环境内:$object=指定的上下文对象

在bind-foreach环境内:$object=foreach的数据项

当前事件监听对象

on事件:event.source,X5组件对象;还可以绑定操作;

bind事件:event.currenttarget,HTML元素对象;