Question

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

关于向动态生成的DOM元素注入clickHandlers（函数/范围）

在这个基本设置中，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>

的Javascript

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以保持在范围内，希望如果有角度可以做到这一点。 http://jsfiddle.net/casadev/n50ecw5m/14/

我自己回答后的迷你问题：有没有办法避免使用templateUrl，以防万一我不需要一个？

Answer 1

谁让你使用棱角分明并给你这个要求？您需要做的只是ng-click="clickHandler($event)"，甚至更好ng-click="clickHandler(folio)"来传递您感兴趣的数据。ng-repeat在列表更改时不断进行随机播放并创建/销毁元素，手动管理这些绑定将是一场噩梦。您当然可以使用jquery和$('ul.nav-pills a）。on（'click'，clickHandler）. Then you would have to put your code in a $ scope。$ apply（）`以获取角度以注意任何更改。

不是在jquery上添加另一个依赖项，而是为维护代码的人造成烦恼，我会花时间向你的老板争论你应该使用ng-click。

Answer 2

想出来，在生成的内容上使用Router而不是clickHandlers并根据链接分配控制器，路由器可以让您指定我可以在范围内定义和调用的控制器，并调用范围内的其他函数。无需ng-click或任何类型的手动clickHandlers。我希望如果我不能指定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();
}
},
{});

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

2 个答案: