AngularJs利用Directive自定义指令实现组件化开发

muyiyl 93 0

AngularJS 除了内置指令以外,还可以创建自定义指令。在实际应用开发中 可以利用 .directive 函数来添加自定义的指令实现组件化开发。结合实际开发经验记录一下。

以以下输入车牌的功能为例。可以将页面分为包含头部的父组件以及页面主区域的子组件(子组件包含车牌输入框,键盘,以及提示)。实现的功能是在子组件中输入车牌号,在父组件中点击下一步可以获取到子组件组合好的车牌号码。

AngularJs利用Directive自定义指令实现组件化开发

构造子组件

  /**
     * 
     *  <simplecar show-tips=true></simplecar>
     */
    .directive('simplecar', function () {
        return {
            restrict: 'E',
            template: require('@app/tpl/simplecar.html'),
            scope: {
                init: '=',
                showTips: '=?',
                carnum: '=',
            },
            require: ['$ionicLoading', '$ionicPopup'],


            ...

以上页面构造子组件如以上代码所示。在构建中,定义组件的名称为simplecar,并定义它作为标签使用( restrict: 'E' )。template用来定义他的模板路径,也就是界面的html。在作用域中传入三个参数:init,做为初始化方法使用。showTips 传入是否显示提示,carnum 传入车牌号码(作为编辑时父组件传进来的车牌号码使用)

获取数据

父组件获取数据可以在子组件作用域中构造方法,通过父组件调用方法即可获取到子组件的数据。

界面中引用并初始化

<simplecar init="simplecar"></simplecar>

子组件可通过以下几种方法获取车牌信息,具体业务具体分析。:

//获取车牌号字符串
$scope.init.getLicenseStr = function () {
    let carNum = $scope.addCarData.carNumArray.join("");
    if ($scope.addCarData.carNumArray.length < 7) {
        $rootScope.showLoading('车牌输入错误', 1500);
        return carNum
    } else {
        return carNum
    }
}
//获取车牌号数组
$scope.init.getLicenseArr = function () {
    if ($scope.addCarData.carNumArray.length < 7) {
        $rootScope.showLoading('车牌输入错误', 1500);
        return false
    } else {
        return $scope.addCarData.carNumArray
    }
}
//获取牌照颜色
$scope.init.getLicenseColor = function () {
    return $scope.defPlate.carNumColor
}
//获取牌照类型
$scope.init.getLicenseType = function () {
    return $scope.defPlate.carNumType
}
   

父组件点击下一步调用:

let carnum = $scope.simplecar.getLicenseStr()

发表评论 取消回复
表情 图片 链接 代码

分享