在AngularJS中将逻辑与视图分离

我对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()"等文本混淆。

所以视图和逻辑混淆了。

也许这是很常见的做法，但我想知道是否有任何方法来移动所有的信息关于什么事件应该处理，以及他们应该如何处理到一个不同的脚本标签或文件?

我想要得到的是这样的东西:

<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和类替换事件处理程序名称。

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

是的，您可以用id或类替换您的事件处理程序，并在文档加载上使用id或类。reffe。使用此链接

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

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

我可以为你做代码，如果你向我提供你的代码PLNKR。但我认为这很简单，你可以做到。

相关内容

最新更新

热门标签：