0

属性を追加して要素を再コンパイルするディレクティブに少しこだわっています。

ディレクティブ ng-change にスコープがあった場合、もうトリガーされません (それがなくても機能します)。この回答に基づいてテストを行いました

HTML

<div ng-app="myApp">
    <div ng-controller='testController'>
        <div ng-repeat="field in fields">
            <input type="text" ng-model="ngModel[field.fieldName]" property="{{formParams.getProperties(field.fieldName)}}" update-attr ng-change="test()" />
        </div>
    </div>
</div>

ディレクティブ:

angular.module('myApp', [])
    .controller('testController', function ($scope) {
        $scope.properties = {
            "something": {
                "style": "float:left;"
            },
                "something2": {
                "style": "float:right;"
            }
        };

        $scope.ngModel = {};
        $scope.fields = [{
            fieldName: 'something'
        }, {
            fieldName: 'something2'
        }];
        $scope.test = function () {
            alert('i dont get triggered');
        };
        $scope.formParams = {
            getProperties: function (fieldName) {
                return $scope.properties[fieldName];
            }
        };
    })
    .directive('updateAttr', function ($compile) {
        return {
            restrict: 'A',
            replace: true,
            terminate: true,
            scope: {
                ngModel : '='
            },
            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);
                    elem.replaceWith($e);
                }
            }
        };
    });

ここでは、ディレクティブのスコープでテストするためのフィドルのフォーク: fiddle

何か提案はありますか？

4

1 に答える 1

0

ng-change がトリガーされなかった理由を見つけたので、答えを共有します。

ディレクティブにスコープ属性を追加すると、新しいスコープが作成されます。したがって、コンパイルには $scope.$parent を使用する必要があります。フィドルを修正して更新しました。

于 2015-05-18T17:57:17.623 に答える