Question

我有以下代码，我想获取myevent属性的值，我尝试通过：attr.myevent得到它，但它返回'undefined'

myApp.directive('eventCustom' , function(){
    return{
        restrict: 'AEC',
        template: '<button myevent="click">clickme</button>',
        link: function(scope, elem , attr){
            elem.bind('click' , function(){
                alert(attr.myevent);
            });
        }
    }
})

http://jsfiddle.net/HB7LU/19711/

Answer 1

您使用的方法将检测<event-custom>元素上的属性值，而不是指令模板内元素的属性。

例如，如果您使用此HTML，您将获得结果＆＃34; test＆＃34;。

<event-custom myevent='test'></event-custom>

要在按钮上获取myevent的值，您可以从点击事件中访问它，但这不是理想的方法。 Angular允许您避免处理DOM，并且您可能偶尔必须这样做但我怀疑在这种情况下它是必要的。

link: function(scope, elem , attr){
        elem.bind('click' , function(event){
            alert(event.target.getAttribute("myevent"));
        });
    }

通常，如果您想检测模板中的点击事件并在指令中选择它们，您可以使用控制器，例如

myApp.directive('eventCustom' , function(){
    return{
        restrict: 'AEC',
        template: '<button ng-click="clickme(\'test\')">clickme</button>',
        link: function(scope, elem , attr){
        },
        controller: function($scope){
            $scope.clickme = function(value){alert(value)};
        }
    }
})

Answer 2

你可以喜欢这个

myApp.directive('eventCustom' , function(){
return{
    restrict: 'AEC',
    template: '<button myevent="click">clickme</button>',
    link: function(scope, elem , attr){
        elem.bind('click' , function(){
            alert(attr.$$element.find('button').attr('myevent'));
        });
    }
}

}）

Answer 3

如果您使用以下内容，则可以获得它。

elem.bind('click' , function(){
    alert(elem[0].childNodes[0].textContent);
});

指令中的Angularjs属性未定义

3 个答案: