Question

我正在尝试制作一个自定义指令，它会根据属性显示不同的按钮。其中一个按钮需要单击事件处理程序，我想在指令中处理它，因为在同一页面中将有多个此指令的实例。我尝试了下面的代码，但无济于事。

'use strict';
angular
    .module('test-template', [])
    .directive('testTemplateBricks', [
    '$compile',
    '$timeout',
        function($compile,$timeout) {
            return {
               restrict: 'A', 
                link: function($scope, iElm, iAttrs, controller) {
                    var el = "";
                    if(iAttrs.needImg=="true")
                    {
                        el += '<input type="file" style="display:none;" class="browse-file"/><button class="btn btn-info" ><span class="glyphicon glyphicon-picture" ng-click="browse()"></span></button>';
                    }
                    if(iAttrs.needTxt=="true")
                    {
                        el += ' <button class="btn btn-info"><span class="glyphicon glyphicon-pencil"></span></button>';
                    }

                    $compile(el)($scope);
                    iElm.append(el);

                    $scope.browse = function() { console.log("browsing");};

                    $timeout(function(){
                        iElm.on("click",function(e){
                            console.log("Browsing");
                            iElm.find("input[type=file]").click();
                        });
                    });
                }
            };
        }
    ]);

编辑：http://plnkr.co/edit/bNRLvWjEE7LLvhwRFIae?p=preview

在此示例中，我想在单击图像按钮时显示隐藏文件浏览器。

Answer 1

所以我不推荐这种方法来切换元素的可见性，它是在模板逻辑中更好地处理的东西。

但是为了让你开始我已经采取了你的代码并进行了一些修改（https://jsbin.com/negawu）

angular
    .module('test-template', [])
    .directive('testTemplateBricks', [
    '$compile',
    '$timeout',
        function($compile,$timeout) {
            return {
               restrict: 'A',
               template: '<input type="file" class="browse-file"/>' + 
                         '<button class="btn btn-info" ng-show="showImage">' + 
                           '<span class="glyphicon glyphicon-picture" ng-click="browse()"></span>' + 
                         '</button>' + 
                         '<button class="btn btn-info" ng-show="showText">' + 
                           '<span class="glyphicon glyphicon-pencil"></span>' + 
                         '</button>',
                link: function($scope, iElm, iAttrs, controller) {

                    $scope.showImage = false;
                    $scope.showText = false;

                    if (iAttrs.needImg == "true") {
                        $scope.showImage = true;
                    }

                    if (iAttrs.needTxt == "true") {
                        $scope.showText = true;
                    }

                    $scope.browse = function() {      
                      console.log("browsing");
                    };
                }
            };
        }
    ]);

Angularjs点击链接

1 个答案: