您的位置:首页 > Web前端 > JavaScript

abgularjs 自定义标签感觉有用的东西

2014-11-25 10:58 190 查看
    需求:定义一个自定义 列表  我们只需要 开发列表中的一个元素  就可以完成列表元素的变更

下面是列表的JS 和 标签

   'use strict';

define([],function(){

    return ['list',function($http){

        var items={

            restrict:'E',

            template:function(o,attrs){

                var mydirective='';

                mydirective="<"+attrs.directivename+" order='ss'></"+attrs.directivename+">";

                return "<div ng-repeat='ss in order' class='title''  ng-class='{titleclear:($index)%titlerowpre==0}'>"+mydirective+"</div>";

            },

            replace:true,

            scope:{

                order:'=order',

                titlerowpre:'='

            },

             link:function(scope,element,attrs){

//                items.templateUrl='../../common/templatehtml/listElement.html';

            }

        };

      return items;

    }]

});

 <list order="order" directivename="liele" titlerowpre="2">

    </list>

主要是attrs 可以获取 标签元素 属性苏对应的值  比如directivename  获取时 就是  liele 

找了好长时间  还是我们经理找到的

资料太少了

下面是开发的一个元素

'use strict';

define([],function(){

    return ['liele',function($http){

        var items={

            restrict:'E',

            templateUrl:'common/templatehtml/listElement.html',

            replace:true,

            scope:{

                order:'='

            },

            link:function(scope,element,attrs){

//                items.templateUrl='../../common/templatehtml/listElement.html';

            }

        };

        return items;

    }]

});

  <div>

      <ul>

          <li><table  width="260" border="1" style="text-align: right" >

              <tr style="height: 25px" >

                  <td style="text-align: left">订单号:{{order.dingdan_String}}</td>

                  <td  colspan="3">{{order.provider_String}}</td>

                  <td><button>1</button><button>2</button><button>3</button></td>

              </tr>

              <tr  style="height: 25px">

                  <td style="text-align: left"><img src="Resources/images/{{order.img_String}}" style="height: 50px;width:50px"></td>

                  <td>{{order.abstract_String}}</td>

                  <td>{{order.unitprice_String}}</td>

                  <td>{{order.count_Int64}}</td>

                  <td>申请售后</td>

              </tr>

          </table></li><br>

      </ul>

  </div>

才开始学习 希望对你们有帮助
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: