【自定义指令的link方法可有有4个参数，具体这4个参数各有什么用处？ _angular 指令】

自定义指令的link方法可有有4个参数，具体这4个参数各有什么用处？

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(1)

angular 指令

详细描述

截图

代码

angular.module('myApp')
    //分页指令api接口
    // $scope.option = {
    //     curr: 1,
    //     count: 10,
    //     all: 20,
    //     listSize: 10,
    //     click: function (page, size) {
    //         //page 当前页数
    //         //size 每页显示条数
    //         console.log('页数' + page)
    //         console.log('显示' + size)
    //     }
    // }
    .directive('myPage', function () {
        return {
            restrict: 'AE',
            priority: 0,
            scope: {
                option: '='
            },
            templateUrl: 'js/directive/mypage/my-page.html',

            link: function (scope, element, attrs) {

                var option = scope.option
                
                //监听option对象变化 更新page模型
                scope.$watch('option', function (newValue, oldValue) {
                    scope.page = getRange(option.curr, option.all, option.count)
                    if (option.curr == undefined) {
                        option.curr = 1
                    }
                }, true)

                //直接点击页数进行页数变化功能
                scope.click = function () {
                    var item = this.item
                    //如果点击相同页数返回
                    if (item == option.curr) {
                        return
                    }
                    switch (true) {
                        case item == '首页':
                            option.curr = 1
                            break
                        case item == '末页':
                            option.curr = option.all
                            break
                        case item == '<': //上一页
                            if (option.curr > 1) {
                                --option.curr
                            }
                            break
                        case item == '>': //下一页
                            if (option.curr < option.all) {
                                ++option.curr
                            }
                            break;
                        case (typeof item) == 'number':
                            option.curr = item
                            break
                    }
                    //回调函数 传递当前点击页数
                    option.click(option.curr, option.listSize)
                }

                //确定按钮逻辑  首先进行表单验证  成功执行回掉函数
                scope.confirm = function () {
                    if (scope.form.goTo.$error.number || scope.form.goTo.$error.pattern) {
                        alert('请输入正确的页数')
                        return
                    }
                    if (scope.goTo > option.all) {
                        scope.goTo = option.all
                        alert('超过最大页数')
                        return
                    }
                    if (scope.form.listSize.$error.number || scope.form.listSize.$error.pattern) {
                        alert('请输入正确的每页显示数量')
                        return
                    }
                    option.curr = scope.goTo
                    //回调函数 传递当前点击页数和每页显示条数
                    option.click(option.curr, option.listSize)
                }


                function getRange(curr, all, count) {
                    var arr = []
                    //计算显示的页数
                    curr = parseInt(curr)
                    all = parseInt(all)
                    count = parseInt(count)
                    var from = curr - parseInt(count / 2)
                    var to = curr + parseInt(count / 2) + (count % 2) - 1
                    //显示的页数容处理
                    if (from <= 0) {
                        from = 1
                        to = from + count - 1;
                        if (to > all) {
                            to = all
                        }
                    }
                    if (to > all) {
                        to = all
                        from = to - count + 1;
                        if (from <= 0) {
                            from = 1
                        }
                    }
                    arr.push('首页')
                    arr.push('<')
                    for (var i = from; i <= to; i++) {
                        arr.push(i)
                    }
                    arr.push('>')
                    arr.push('末页')
                    return arr
                }

            }
        }
    })

编辑于2024-05-01

时间排序

热门排序

[深圳|结业弟子]JS-陈皓宇
0

link（）属性函数会默认传入四个参数，他们的意思分别是：
scope
指令用来在其内部注册监听器的作用域。
iElement
iElement参数代表实例元素，指使用此指令的元素。就是我们的自定义指令的标签。
iAttrs
iAttrs参数代表实例属性，是一个由定义在元素上的属性组成的标准化列表，可以在所有指令的链接函数间共享。会以JavaScript对象的形式进行传递。通常就是指自定义指令的属性形式
controller
controller 参数指向 require 选项定义的控制器。如果没有设置 require 选项，那么controller参数的值为undefined。
控制器在所有的指令间共享，因此指令可以将控制器当作通信通道（公共API）。如果设置了多个require，那么这个参数会是一个由控制器实例组成的数组，而不只是一个单独的控制器。
其实这个和compile函数的postlink是一样的。

查看全部>

编辑于2018-08-31

去第页