Question

当我点击一个按钮时，控制器将从某个$http服务回调函数中获取数据，并$broadcast在$scope上。然后，在指令中，我有一个监听器来获取数据并做一些逻辑。但是，当我在按钮上使用多个格式的ng-repeat时，当我点击每个按钮时，所有ng-repeat项都会触发监听器。如何才能使侦听器仅针对单击的按钮被触发？请参阅下面的示例代码。

var app = angular.module('demoApp', []);

app.controller('MyCtrl', function($scope) {
    var myCtrl = this;
    myCtrl.getFile = function(){
        var response = 'some data';
		$scope.$broadcast('downloadFile', {'response': response});
	}
});

app.directive('fileDownload', function(){
	return {
		restrict: 'A',
		link: function(scope, elem, attrs){
			var cancelEvent = scope.$on('downloadFile', function(event, args){
				console.log('called', args);
			});

			scope.$on('$destroy', function(){
				cancelEvent();
			});

		}
	}
});

<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>

Answer 1

在此示例中，您可以了解如何使用范围创建指令，我创建一个示例以获取所有格式获取所有列表，获取选中列表，获得下载格式，指令。

关于你的代码，实际上回复是正确的，因为当我们使用某些功能，如 [$ 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>

Answer 2

我认为它会对你有所帮助

＆＃13;

<!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>

＆＃13;

使用ng-repeat时如何使用角度监听器？

2 个答案: