AngularJs Directive to add Attributes, the events are not triggered

Question

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/

Answer 1

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/.