AngularJs 指令添加属性，不触发事件 [英] AngularJs Directive to add Attributes, the events are not triggered

问题描述

大家早上好，

我有点坚持这个指令，我想要的是从 getProperties 函数接收一个 JSON 字符串，例如:

{"class":"someclass","ng-change":"someChange()",ng-click":"someCLick()"}

该指令将创建 JSON 中存在的所有属性(并且它有效)，问题是 ng-* 根本不起作用......有什么想法吗??

HTML:

 
<input type="text" ng-model="ngModel[field.fieldName]" ng-switch="text" property="{{formParams.getProperties(field.fieldName)}}" update-attr/>

这是指令:

 .directive('updateAttr', function () {返回 {限制:'A'，替换:真的，范围:{测试:'&'},终止:真，链接:函数(范围，元素，属性){if (angular.isDefined(attrs['property']) || attrs['property'].lenght != 0) {var json = JSON.parse(attrs['property']);elem.removeAttr('属性');angular.forEach(json, function (value, key) {elem.attr(key, value);});}},};})

这是一个 jsFiddle:http://jsfiddle.net/nyyfmd0e/16/

解决方案

问题是你在 link 函数中添加了 ng-change 属性，在指令之后已编译，因此 Angular 不知道它是否存在.添加新属性后，您需要重新编译并替换指令的元素.

尝试用下面的代码替换您的指令.

.directive('updateAttr', function ($compile) {返回 {限制:'A'，替换:真的，终止:真的，链接:函数(范围，元素，属性){如果 (angular.isDefined(attrs['property']) && attrs['property'].lenght != 0) {var json = JSON.parse(attrs['property']);angular.forEach(json, function (value, key) {elem.attr(key, value);});elem.removeAttr('属性');var $e = $compile(elem[0].outerHTML)(scope);//<-- 重新编译elem.replaceWith($e);//<-- 替换为新的编译元素}},控制器:功能($范围){$scope.test=function(){console.log('我要么');}}};});

在这种情况下，指令控制器中的 test() 函数将被调用.如果您删除指令控制器，则将调用您应用程序的一个控制器(在您的 Fiddle 中称为 testController).

这里有一个工作小提琴供您参考 http://jsfiddle.net/JohnnyEstilles/3oaha6z4/.

Good morning everybody,

I'm a bit stuck on this directive, what I want is to receive a JSON string from the getProperties function like:

{"class":"someclass","ng-change":"someChange()",ng-click": "someCLick()"}

The directive will create all the attributes present in the JSON(and it works), the problem is the ng-* doesn't work at all.... any ideas??

HTML:

 <div ng-repeat="field in fields">
    <input  type="text" ng-model="ngModel[field.fieldName]" ng-switch="text" property="{{formParams.getProperties(field.fieldName)}}" update-attr />
</div>

This is the directive:

 .directive('updateAttr', function () {
        return {
            restrict: 'A',
            replace: true,
            scope:{
                test:'&'
            },
            terminate:true,

            link: function (scope, elem, attrs) {
                if (angular.isDefined(attrs['property']) || attrs['property'].lenght != 0) {
                    var json = JSON.parse(attrs['property']);
                    elem.removeAttr('property');
                    angular.forEach(json, function (value, key) {
                            elem.attr(key, value);
                    });
                }
            },
        };
    })

here's a jsFiddle: http://jsfiddle.net/nyyfmd0e/16/

解决方案

The problem is that your adding the ng-change attribute during the link function, after the directive has been compiled, therefore Angular is not aware if its existence. You need to recompile and replace the element of the directive after you add the new attributes.

Try replacing your directive with the code below.

.directive('updateAttr', function ($compile) {
    return {
        restrict: 'A',
        replace: true,
        terminate: true,
        link: function (scope, elem, attrs) {
            if (angular.isDefined(attrs['property']) && attrs['property'].lenght != 0) {
                var json = JSON.parse(attrs['property']);
                angular.forEach(json, function (value, key) {
                    elem.attr(key, value);
                });
                elem.removeAttr('property');
                var $e = $compile(elem[0].outerHTML)(scope); // <-- recompile
                elem.replaceWith($e); // <-- replace with new compiled element
            }
        },
        controller:function($scope){
            $scope.test=function(){
                console.log('me either');
            }                
        }
    };
});

In this case the test() function in the directive controller will be called. If you remove the directive controller, then one your application's controller (called testController in your Fiddle) will be invoked.

Here a working Fiddle for your reference http://jsfiddle.net/JohnnyEstilles/3oaha6z4/.

这篇关于AngularJs 指令添加属性，不触发事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！