Question

我也是AngularJS和Web开发的新手。

以下是示例代码：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script type="text/javascript">
  var app = angular.module('app', []);

  app.controller("controller", function($scope, $http) {
    $scope.doClick = function() {
      alert("alert!");
    }
  });
</script>

<body ng-app="app" ng-controller="controller">
  <button ng-click="doClick()">Button</button>
</body>

这是非常简单的代码，但在我的应用上工作了一段时间我注意到我的HTML页面正在逐渐混乱，包括ng-click="doClick()"，ng-click="doAnotherClick()"，ng-change="doChange()"等文字。< / p>

因此视图与逻辑混淆。

也许这是非常惯常的做法，但我想知道有没有办法移动有关应该处理哪些事件的所有信息以及如何将它们处理到不同的脚本标记或文件？

我想得的是这样的：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script type="text/javascript">
  var app = angular.module('app', []);

  // Binding event handlers
  //
  // Something like the following imagined code:
  //
  // element(".myButton").bind("click", function(element) {
  //    doClick();
  // });


  app.controller("controller", function($scope, $http) {
    $scope.doClick = function(element) {
      alert(element.somedata);
    }
  });
</script>

<body ng-app="app" ng-controller="controller">
  <button class="myButton">Button</button>
</body>

换句话说，我想用id＆＃39; s和类替换事件处理程序名称。

此外，在事件处理程序（doClick）中，我希望能够访问触发事件的元素的任何数据（例如存储在与元素关联的ng-model中的数据）。

Answer 1

是的，你可以用文件加载中的use od querySelector替换你的事件处理程序和id或类。为了参考。使用此链接

http://www.w3schools.com/jsref/met_document_queryselector.asp 和

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

如果您提供代码的plnkr，我可以为您编写代码。但我认为你可以做到这一点很简单。我希望它会对你有所帮助。

在AngularJS中将视图与视图分开

1 个答案: