angular关于directive的总结

最新推荐文章于 2021-12-29 15:03:25 发布

原创最新推荐文章于 2021-12-29 15:03:25 发布 · 201 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#directive

知识点总计专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种在前端开发中自定义的图片选择指令，通过AngularJS实现，用于动态加载和选择图片，包括图片预览、删除等功能。该指令使用了自定义控制器和链接函数，实现了与后端API的交互，提供了丰富的用户交互体验。

使用

<user-imgs imgs="imgs" refresh-method="refreshStyle()" img-model="sceneConfigObj.options.globalStyle.backgroundImage"></user-imgs>

定义

app.directive('userImgs', function () {
    return {
        restrict: 'E',
        templateUrl: '/frontend/dashboard/directives/select-img.html',
        replace: true,
        scope: {
            imgs: '=', //存放图片的文件夹
            imgModel: '=',//选中事件
            refreshMethod: '&'//选中事件
        },
        link: function (scope, element, attrs, controller) {

        },
        controller: function ($scope, $http, $element, $timeout) {
            $scope.imgSelect = function (imgPath) {
                $scope.imgModel = imgPath;
                $scope.refreshMethod();
            };

            $scope.delImg = function (index) {
                $http.get(encodeURI('/api/dash/delUserImg?imgPath=' + $scope.imgs[index])).then(function (rs) {
                    if (rs.data.status == 'success') {
                        $scope.imgs.splice(index, 1);
                    }
                });
            };
        }
    };
});

select-img.html的定义

<div class="img-content">
    <div class="img-item" ng-repeat="($index, imgPath) in imgs track by $index">
        <div class="del-img" ng-click="delImg($index)">x</div>
        <img ng-click="imgSelect(imgPath)" ng-src="{{ imgPath }}">
    </div>
</div>