[英]Setting click handlers dynamically on generated dom by Angular
Whoever solves this will be the Javascript, Angular Genius... 解决这个问题的人将是Javascript,Angular Genius ...
It's about injecting clickHandlers (function/scope) to the dynamically generated DOM elements 关于将clickHandlers(函数/作用域)注入动态生成的DOM元素
In this basic setup the DOM elements are generated by Angular, Angular is bootstrapped to an element and content is populated by an array. 在此基本设置中,DOM元素由Angular生成,Angular被引导到一个元素,内容由数组填充。 . 。
Is there a way that we can set click handlers on each anchor dynamically (no need of cross browser implementation, addEventHandler would suffice). 有没有一种方法可以动态设置每个锚点的单击处理程序(不需要跨浏览器实现,addEventHandler就足够了)。
It's best to look at the Fiddle link itself given below to get the full picture. 最好查看下面给出的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 Java脚本
var self = this;
var navigation = angular.module("navigation", []);
navigation.controller("foliosController", function($scope){self.foliosController($scope)});
angular.bootstrap(document.getElementById("navigation"), ["navigation"]);
Fiddle: http://jsfiddle.net/casadev/n50ecw5m/ 小提琴: http : //jsfiddle.net/casadev/n50ecw5m/
Bonus: If there's a way to set only the first anchor as active. 奖励:如果有一种方法可以仅将第一个锚设置为活动状态。
EDIT: There's a clickHandler defined within the scope, need to link the clickHandler with the generated dom links. 编辑:在范围内定义了一个clickHandler,需要将clickHandler与生成的dom链接链接。
clickHandler: function(event) {
alert(event.target);
}
Edit 2: Some progress but attached clickHandlers manually to stay inside the scope, wished if angular could do it. 编辑2:取得了一些进展,但是手动附加了clickHandlers以保留在范围内,希望angular可以做到。 http://jsfiddle.net/casadev/n50ecw5m/14/ http://jsfiddle.net/casadev/n50ecw5m/14/
Mini Question after my own answer: Is there a way to avoid templateUrl in case I don't need to have one? 我自己回答之后的迷你问题:如果我不需要一个模板,是否可以避免templateUrl?
Who made you use angular and gave you that requirement? 谁让您使用了angular并给了您这个要求? All you need to do is ng-click="clickHandler($event)"
, or even better ng-click="clickHandler(folio)"
to pass the data you're interested in. ng-repeat
constantly shuffles and creates/destroys elements when the list changes, manually managing those bindings would be a nightmare. 您需要做的就是ng-click="clickHandler($event)"
,甚至更好的ng-click="clickHandler(folio)"
来传递您感兴趣的数据ng-click="clickHandler(folio)"
ng-repeat
不断地改组并创建/销毁列表更改时,手动管理这些绑定将是一场噩梦。 You could use jquery of course and something like $('ul.nav-pills a
).on('click', clickHandler) . Then you would have to put your code in a
您当然可以使用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()` to get angular to notice any changes. . Then you would have to put your code in a
$ scope。$ apply()`中,以引起注意任何更改。
Instead of adding another dependency on jquery and creating an annoyance for anyone maintaining your code I would spend my time arguing to your boss that you should use ng-click
. 与其添加对jquery的其他依赖关系并不会给任何维护您代码的人带来麻烦,我将花时间与老板争吵您应该使用ng-click
。
Figured it out, use Router instead of clickHandlers on the generated content and assign controllers as per the link, routers can let you specify Controllers that I can have defined and called within the scope and call other functions within the scope. 弄清楚了,在生成的内容上使用Router而不是clickHandlers并根据链接分配控制器,router可以让您指定我可以在范围内定义和调用的Controller并在范围内调用其他函数。 No need for ng-click or any sort of manual clickHandlers. 无需ng-click或任何形式的手动clickHandler。 I wish if I could not specify a templateUrl since I don't need but it's not working if I omit it, appreciate any comments. 我希望如果由于我不需要而无法指定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();
}
},
{});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.