使用jqlite在AngularJS指令中监听第一个孩子的事件

时间:2016-09-02 10:46:53

标签: javascript jquery angularjs angularjs-directive jqlite

我正在进行侧导航,它的树形结构只有一层深。

现在每件事都很好,但不是在父母 li 上听事件,我只想听第一个 a 标签。



$http({
  url: myUrl,
  method: 'GET',
  params: myParams,
  paramSerializer: '$httpParamSerializerJQLike'
});


.controller(function($http, $httpParamSerializerJQLike) {
  //...

  $http({
    url: myUrl,
    method: 'POST',
    data: $httpParamSerializerJQLike(myData),
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  });

})






app.directive('subNav', function($animate, $compile) {
    return {
        link : function(scope, element, attr, controller) {
			element.on('click', function(e){
				console.log(element);
				x = element;
				controller.toggleState();				
				$compile(element.contents())(scope);
				scope.$apply();
				/**x = element;
				e.stopPropagation();
				if(element.find('ul').hasClass('ng-hide')){
					$animate.removeClass(element.find('ul'), 'ng-hide');
					scope.$apply();
				} else {
					$animate.addClass(element.find('ul'), 'ng-hide');
					scope.$apply();
				}**/
			});
        },
        controller : [function(){
			var vm = this;
			vm.toggleState = function() {
				if(vm.state === "false"){
					vm.state = false;
				}
				vm.state = !vm.state;
			};
		}],
		controllerAs : "subNav",
		scope: {
			state: '@subNav'
		},
		bindToController: true
    };
});




enter image description here

这里发生的事情就是当我点击选项1 树扩展和关闭时,即使我点击第1项树也关闭了大问题因为我正在听取整个元素的事件。

1 个答案:

答案 0 :(得分:0)

我在发布问题后立即获得解决方案。通过使用解决了这个问题。

angular.element(element).find('a').first().on('click', function(e){.....})

而不是

element.on('click', function(e){.....})

如果有人发布更好的解决方案,我会接受这个答案。