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

问题描述

早上好大家好，

我有点停留在这个指令，我要的是收到一个JSON字符串从功能的GetProperties，如：

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()"}

该指令将创建在JSON所有属性present（和它的作品），问题是NG- *不能在所有的工作....任何想法？

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>

这是指令：

 .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);
                    });
                }
            },
        };
    })

这里有一个的jsfiddle： http://jsfiddle.net/nyyfmd0e/16/

推荐答案

的问题是，你的加入链接在 NG-变化属性功能，该指令被编译后，因此角是不知道，如果它的存在。您需要重新编译，并添加新的属性后替换指令的元素。

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.

试着用下面的code更换您的指令。

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');
            }                
        }
    };
});

在这种情况下，测试（）中的指令控制器的功能将被调用。如果删除指令控制器，再一个应用程序的控制器（名为的TestController 在你的小提琴）将被调用。

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.

下面工作小提琴，供您参考 http://jsfiddle.net/JohnnyEstilles/3oaha6z4/

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

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