在angularjs指令的鏈接函數中存儲函數表達式並通過ng-click使用它

Question

我有以下的angularjs指令，我希望能夠使用ng-click在屬性滑塊內執行showMap（）。 HTML。我錯過了什麼？

(function() { 
    'use strict'; 

    angular 
     .module('myapp') 
     .directive('propertySlider', propertySlider); 

    function propertySlider($timeout) { 

     return { 
      restrict: 'E', 
      templateUrl: 'property-slider.html', 
      replace: true, 
      scope: { 
       property: '=', 
       photos: '=' 
      }, 
      link: function(scope, element) { 
       $timeout(function(){ 

        var slider = element.flickity({ 
         cellAlign: 'left', 
         cellSelector: '.gallery-cell', 
         lazyLoad: true, 
         wrapAround: true, 
         initialIndex: 1 
        }); 

        var showMap = function(){ 
         slider.flickity('select', 0); 
        }; 

       },500); 

      } 
     }; 

    } 

})(); 

Answer 1

兩個問題....功能需要被分配到的範圍，你不;噸需要創建它裏面$timeout

link: function(scope, element) { 

    scope.showMap = function() { 
     element.flickity('select', 0); 
    }; 

    $timeout(function() { 

      element.flickity({ 
      cellAlign: 'left', 
      cellSelector: '.gallery-cell', 
      lazyLoad: true, 
      wrapAround: true, 
      initialIndex: 1 
     }); 

    }, 500); 
} 

Answer 2

而不是使用ng-click你也可以保持你的方法「私人「你的指令和檢測元素上的事件：

link: function(scope, element, attrs) { 
    element.on('click', function(e) { 
     showMap(); 
    }); 

    var showMap = ... 
} 

link: function(scope, element, attrs) { 
    element.on('click', function(e) { 
     showMap(); 
    }); 

    var showMap = ... 
}