directive指令

directive

 directive('mySelect',['$timeout',function($timeout){


        return{

            restrict:'EA',
            scope:{

                inputData:'=',//双向绑定数据
                listData:'=',
                
            },
            replace:true,
            template:'<div class="contain-select" >\
                        <div class="input-text">\
                            <input ng-model="inputData" placeholder="全部" class="input-left" ng-click="showList()" readOnly ng-blur="showList()"/>\
                            <i  class="position-right" ng-class="{\'fa fa-angle-left\':left(),\'fa fa-angle-down\':down()}"></i>\
                        </div>\
                          <ul class="ul-data" ng-show="isOpen"  >\
                             <li ng-repeat="data in listData track by $index" ng-mousedown="chioce(data)" class="list-data" ng-class="{active:select(data)}">{{data}}</li>\
                         </ul>\
                      </div>',
link:function(scope,element,attr){},
}

出现错误 angular.js:11707 Error: [$compile:tplrt] Template for directive 'mySelect' must have exactly one root element.错误

原因：template指向的模板，外层只能有一层元素包裹。如<div></div>,如果为<div></div><div></div>会出现上述错误。

 

当出现tranclude：属性的时候，注意包含的模板的作用域是采用原来指令编译时候所在的作用域。千万注意作用域问题。