Angular not binding ng-click

我正在爲我的應用程序構建一個導出函數。我需要有可點擊的按鈕來調用範圍中的導出功能。我試圖用ng-click="myFunction()"，但出口不叫......Angular not binding ng-click

這裏是我的玉模板

ul.dropdown-menu(role='menu' aria-labelledby='dLabel') 
     li 
     a(export-content-as, export-type='markdown', 
     export-content='properties.quill.getHTML', 
     href='', ng-click="exportAs()") Export as markdown 
     li 
     a(export-content-as, export-type='raw', 
     export-content='properties.quill.getText', 
     href='', ng-click="exportAs()") Export as text 
     li 
     a(export-content-as, export-type='pdf', 
     export-content='properties.quill.getContents', 
     href='', ng-click="exportAs()") Export as PDF

和我的js文件：

angular.module('foo', []) 
… 
.directive('exportContentAs', ['properties', '$window', 'exportRawText', 'exportMarkdown', 'exportPdf', 
    function(properties, $window, exportRawText, exportMarkdown, exportPdf) { 
    function link(scope, element) { 
     scope.exportAs = function() { 
     switch (scope.type) { 
      case 'markdown': 
      exportMarkdown(scope.exportContent()); 
      break; 
      case 'raw': 
      exportRawText(scope.exportContent()); 
      break; 
      case 'pdf': 
      exportPdf(scope.exportContent()); 
      break; 
      default: 
      break; 
     } 
     }; 
    } 

    return { 
     scope: { 
     exportType: '@', 
     exportContent: '&' 
     }, 
     link: link, 
     restrict: 'A' 
    }; 
    } 
]);

我知道模塊加載（我在另一部分代碼中調用另一個指令）。我也知道，當我點擊任何一個鏈接時，函數scope.exportAs是而不是調用。

我也可以設法通過使用element.on('click', exportAs)來將點擊綁定到exportAs的調用，但是我想明白爲什麼我需要這樣做（不僅僅是ng-click="exportAs"）。

來源

2015-06-03 cphyc

你可以用正常的方式綁定點擊事件的指令。與屬性指令錨標記如果你堅持要用NG點擊，你可以嘗試這樣的事：

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.type = "raw"; 
    $scope.exportAs = function(exportType) { 
     switch (exportType) { 
      case 'markdown': 
      alert('markdown'); 
      break; 
      case 'raw': 
      alert('raw'); 
      break; 
      case 'pdf': 
      alert('pdf'); 
      break; 
      default: 
      alert(exportType); 
      break; 
     } 
     }; 
}); 


app.directive('exportContentAs', 
    function() { 
    return { 
     scope: { 
     exportType: '=', 
     eventHandler: '&ngClick' 
     }, 
     restrict: 'A' 
    }; 
    } 
);

用法：

<body ng-controller="MainCtrl"> 
    <a export-content-as export-type='type' 
     href ng-click="exportAs(type)"> TEST</a> 
    </body>

來源

2015-06-03 20:57:47 ngunha02

正在發生，因爲角在分離尋求exportAs功能不您的指令範圍，但在控制器範圍（父範圍）中。還有一個辦法：

從指令取出分離範圍
傳遞類型，並直接將文件名exportAs

這裏是pluker證明這一點： http://plnkr.co/edit/AKIRZ2DZIJOHLsC0b95O

希望這會幫助你理解。

來源

2015-06-03 21:28:13

回答

相關問題