Angularjs Обработка событий по ссылке в ссылке

Question

Я пытаюсь создать пользовательскую директиву, в которой будут отображаться различные кнопки на основе атрибута. Одна из кнопок требует обработчика события click, и я хочу обработать его в директиве, так как на этой странице будет несколько экземпляров этой директивы. Я попробовал код ниже, но безрезультатно.

'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(); 
         }); 
        }); 
       } 
      }; 
     } 
    ]); 

EDIT: 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"); 
        }; 
       } 
      }; 
     } 
    ]);