如何在使用ng-repeat時使用角度監聽器？

當我點擊一個按鈕時，控制器將從某個$http服務回調函數獲取數據，並且將在$scope上獲取它的$broadcast。然後，在指令中，我有一個監聽器來獲取數據並執行一些邏輯。但是，當我在按鈕上使用多種格式的ng-repeat時，當我單擊每個按鈕時，所有ng-repeat項目的偵聽器都會被觸發。我如何才能讓偵聽器只爲點擊按鈕而被解僱？請參閱下面的示例代碼。如何在使用ng-repeat時使用角度監聽器？

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

 
app.controller('MyCtrl', function($scope){ 
 
\t \t var myCtrl = this; 
 
\t \t myCtrl.getFile = function(){ 
 
      var response = 'some data'; 
 
\t \t \t $scope.$broadcast('downloadFile', {'response': response}); 
 
\t \t } 
 

 
\t }); 
 

 
app.directive('fileDownload', function(){ 
 
\t \t return { 
 
\t \t \t restrict: 'A', 
 
\t \t \t link: function(scope, elem, attrs){ 
 

 
\t \t \t \t var cancelEvent = scope.$on('downloadFile', function(event, args){ 
 
\t \t \t \t \t console.log('called', args); 
 
\t \t \t \t }); 
 

 
\t \t \t \t scope.$on('$destroy', function(){ 
 
\t \t \t \t \t cancelEvent(); 
 
\t \t \t \t }); 
 

 
\t \t \t } 
 
\t \t } 
 

 
\t });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="demoApp"> 
 
    <div ng-controller="MyCtrl as myCtrl"> 
 
    <button ng-repeat="format in ['TXT','PDF','CSV']" ng-click="myCtrl.getFile()" file-download>{{ format }}</button> 
 
    </div> 
 
</div>

來源

2016-10-15 mhdslm

實際上有三個指令實例存在，所以它調用三次可以讓我知道你想要做什麼？ –

我想要使用屬性指令將文件下載到按鈕上時。該按鈕綁定到'ng-click'控制器方法，該方法使用'$ http'請求獲取文件數據，然後數據將被指令處理以顯示。我知道這個指令有三個實例，這就是數據被指令處理三次的原因。我的問題是如何使指令僅處理點擊項目的數據一次？ – mhdslm

在這個例子你能弄清楚如何使用範圍創造指令，我創建了一個樣本，以獲得所有格式得到所有列表，得到檢查列表，根據指令獲得下載格式。

關於您的代碼，實際上的迴應是真實的，因爲當我們使用一些功能，如[$ broadcast]或...在應用程序上運行所有數據已在我們的範圍內設置。但請記住，在這種情況下，您不需要使用$ broadcast，因爲我們的操作是及時的，當我們點擊某個功能時，我們可以得到它們。

希望可以幫助你我的朋友

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

 
     app.controller('ctrl', function ($scope) { 
 
      var self = this; 
 

 
      self.lists = [ 
 
       { name: "A"}, 
 
       { name: "B"}, 
 
       { name: "C"}, 
 
       { name: "D"} 
 
      ]; 
 

 
      self.getFile = function() { 
 
       console.log('controller', "done"); 
 
      } 
 
     }); 
 

 
     app.directive('fileDownload', function ($filter) { 
 
      return { 
 
       restrict: 'A', 
 
       scope: { 
 
        fileDownload: "=", 
 
        list: "=" 
 
       }, 
 
       link: function (scope, elem) { 
 
        elem.on("click", function() { 
 
         var filter = $filter("filter")(scope.list, { checked: true }); 
 
         console.log('from directive, all list', scope.list); 
 
         console.log('from directive, checked list', filter); 
 
         console.log('from directive, download format', scope.fileDownload); 
 
        }); 
 
       } 
 
      } 
 

 
     });

<!DOCTYPE html> 
 
<html ng-app="app" ng-controller="ctrl as self"> 
 
<head> 
 
    <title></title> 
 
</head> 
 
<body> 
 
    <small>list</small> 
 

 
    <ul> 
 
     <li ng-repeat="list in self.lists"> 
 
      <input type="checkbox" ng-model="list.checked"/> 
 
      {{list.name}} 
 
     </li> 
 
    </ul> 
 

 
    <small>download format</small> 
 
    <button ng-repeat="format in ['TXT','PDF','CSV']" ng-click="self.getFile()" list="self.lists" file-download="format">{{ format }}</button> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
</body> 
 
</html>

來源

2016-10-15 05:36:32 Maher

謝謝Maher！但是，只有在解析$ http請求後纔會設置來自控制器的數據。所以，這些行動實際上並不及時。點擊事件後，指令中的數據可能爲空或爲空。任何建議如何解決？ – mhdslm

我認爲這將有助於你

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <title></title> 
 
    </head> 
 
    <body> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
     <div ng-app="demoApp"> 
 
      <div ng-controller="MyCtrl as myCtrl"> 
 
       <span ng-repeat="format in ['TXT','PDF','CSV']"> 
 
        <span get-file="myCtrl.getFile({data: data})" file-download title="format"></span> 
 
       </span> 
 
      </div> 
 
     </div> 
 
    </body> 
 
    <script type="text/javascript"> 
 
     var app = angular.module('demoApp', []); 
 

 
     app.controller('MyCtrl', function($scope) { 
 
      var myCtrl = this; 
 
      myCtrl.getFile = function(data) { 
 
       var response = 'some data'; 
 
       console.log(response); 
 
       console.log(data); 
 
       // $scope.$broadcast('downloadFile', {'response': response}); 
 
      } 
 

 
     }); 
 

 
     app.directive('fileDownload', function() { 
 
      return { 
 
       restrict: 'A', 
 
       template: "<button ng-click='callFn()'>{{title}}</button>", 
 
       scope: { 
 
        title: '=', 
 
        getFile: '&' 
 
       }, 
 
       link: function(scope, elem, attrs, ctrl) { 
 
        scope.callFn = function(){ 
 
        scope.getFile({data: scope.title}); 
 
        } 
 
        // var cancelEvent = scope.$on('downloadFile', function(event, args) { 
 
        //  console.log('called', args); 
 
        // }); 
 

 
        // scope.$on('$destroy', function() { 
 
        //  cancelEvent(); 
 
        // }); 
 

 
       } 
 
      } 
 

 
     }); 
 
    </script> 
 
</html>

來源

2016-10-18 09:59:34

如何在使用ng-repeat時使用角度監聽器？

回答

相關問題