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

【问题标题】：Setting click handlers dynamically on generated dom by AngularAngular 在生成的 dom 上动态设置点击处理程序
【发布时间】：2014-09-22 18:15:53
【问题描述】：

解决这个问题的人将是 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>

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

我自己回答后的小问题：如果我不需要，有没有办法避免 templateUrl？

【问题讨论】：

为什么不直接使用 ng-click？
@JasonGoemaat 我的要求是留在范围内（html 属性上没有代码），如果您发现在范围内定义了 clickHandler 函数，请查看小提琴jsfiddle.net/casadev/n50ecw5m
我已经回答了我的问题，如果我不需要指定一个，任何人都可以建议我如何在功能时摆脱配置中的 templateUrl。没有它，代码就无法工作

标签： javascript angularjs angularjs-scope

【解决方案1】：

谁让你使用 Angular 并给你这个要求？您需要做的只是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。

【讨论】：

等式的一部分是我们大量使用了纯 mvc 的多核，通过管道和状态机连接，角度与数据绑定有关。我知道调用 ng-click 会传递任何函数，但随后我们丢失了该组件的范围，而是处于全局范围内。其次，手动管理数据绑定是完全可控的，它只是填充数组。（幕后是一个高度解耦的系统）。是的，我们也知道 jQuery click，但想要真正天才的动态 clickHandler 注入。

【解决方案2】：

想通了，在生成的内容上使用路由器而不是 clickHandlers 并根据链接分配控制器，路由器可以让您指定我可以在范围内定义和调用的控制器，并在范围内调用其他功能。不需要 ng-click 或任何类型的手动 clickHandlers。我希望如果我不能指定一个 templateUrl，因为我不需要，但如果我省略它就不起作用，感谢任何 cmets。

<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();
}
},
{});

【讨论】：