通过Angular在生成的dom上动态设置点击处理程序

Question

解决这个问题的人将是Javascript，Angular Genius ...

关于将clickHandlers（函数/作用域）注入动态生成的DOM元素

在此基本设置中，DOM元素由Angular生成，Angular被引导到一个元素，内容由数组填充。 。

有没有一种方法可以动态设置每个锚点的单击处理程序（不需要跨浏览器实现，addEventHandler就足够了）。

最好查看下面给出的Fiddle链接本身，以获取完整图片。

<div id="navigation" data-ng-cloak>
    <ul data-ng-controller="foliosController" class="nav nav-pills nav-stacked">
        <li data-ng-repeat="folio in folios" class="active"><a href="#">{{folio.title}}</a></li>
    </ul>
</div>

Java脚本

var self = this;
var navigation = angular.module("navigation", []);
navigation.controller("foliosController", function($scope){self.foliosController($scope)});
angular.bootstrap(document.getElementById("navigation"), ["navigation"]);

小提琴： http : //jsfiddle.net/casadev/n50ecw5m/

奖励：如果有一种方法可以仅将第一个锚设置为活动状态。

编辑：在范围内定义了一个clickHandler，需要将clickHandler与生成的dom链接链接。

clickHandler: function(event) {
    alert(event.target);
}

编辑2：取得了一些进展，但是手动附加了clickHandlers以保留在范围内，希望angular可以做到。 http://jsfiddle.net/casadev/n50ecw5m/14/

我自己回答之后的迷你问题：如果我不需要一个模板，是否可以避免templateUrl？

Answer 1

谁让您使用了angular并给了您这个要求？ 您需要做的就是ng-click="clickHandler($event)" ，甚至更好的ng-click="clickHandler(folio)"来传递您感兴趣的数据ng-click="clickHandler(folio)" ng-repeat不断地改组并创建/销毁列表更改时，手动管理这些绑定将是一场噩梦。 您当然可以使用jquery和类似$('ul.nav-pills a ）.on（'click'，clickHandler）之类的东西. Then you would have to put your code in a . Then you would have to put your code in a $ scope。$ apply（）`中，以引起注意任何更改。

与其添加对jquery的其他依赖关系并不会给任何维护您代码的人带来麻烦，我将花时间与老板争吵您应该使用ng-click 。

Answer 2

弄清楚了，在生成的内容上使用Router而不是clickHandlers并根据链接分配控制器，router可以让您指定我可以在范围内定义和调用的Controller并在范围内调用其他函数。 无需ng-click或任何形式的手动clickHandler。 我希望如果由于我不需要而无法指定templateUrl，但是如果我忽略它则无法正常工作，请多加评论。

<div id="navigation" data-ng-cloak>
<ul id="folios" ng-controller="FoliosController" class="nav nav-pills nav-stacked">
    <li data-ng-repeat="folio in folios" class="" active="true">
        <a href="#/folios/{{folio.productId}}" id="{{folio.productId}}">{{folio.title}}</a>
    </li>
</ul>
<ng-view></ng-view>

puremvc.define(
{
name: "modules.search.view.components.Navigation",

constructor: function() {
    var self = this;
    var navigation = angular.module("navigation", ["ngRoute"]);

    navigation.config(function($routeProvider, $locationProvider){self.config($routeProvider, $locationProvider)});
    navigation.controller("FoliosController", function($scope, $location){self.foliosController($scope, $location)});
    navigation.controller("SearchController", function($scope, $location, $routeParams){self.searchController($scope, $location, $routeParams)});

    angular.bootstrap(document.getElementById("navigation"), ["navigation"]);
}
},
{
$scope: null,
$location: null,
folios: [],

foliosController: function($scope, $location) {
    this.$scope = $scope;
    this.$location = $location;
    this.$scope.folios = this.folios;
},

searchController: function($scope, $location, $routeParams) {
    console.log($routeParams);
},

config: function($routeProvider, $locationProvider) {
    $routeProvider.
    when("/", {templateUrl:"js/modules/partials/list.html"}).
    when("/folios/:productId", {templateUrl:"js/modules/partials/search.html", controller:"SearchController"});
},

init: function(folios) {
    for(folio in folios) {
        this.folios.push(folios[folio]);
    }
    this.$scope.$apply();
}
},
{});