Angular Recursive Directive with ngModel

Question

I have learned a lot lately about recursive directives, but there are a few more things that I haven't received yet.

This post, in particular, solved most of my problem: Recursion in Angular directives (thanks!)

I managed to create a directive of a recursive rule editor based on this method, which does most of what I want. It successfully edits a complex JSON structure that describes a message processing rule, allowing you to add and remove hierarchy levels and edit values.

The directive is intended to be compressed as follows:

<rule-element rule="<scope variable>"></rule-element>

Ideally, I want this directive to behave as part of the form, signaling a validation, and everything I read tells me that I need to use ngModel for binding. However, the example and therefore my code do not use ngModel, preferring instead to use attributes and local selection areas.

I read that using ngModel with selection areas is complex (an isolated area with an ng-model error ), and my path to mole removal here was not very successful using ngModel, so I ended up using bidirectional attribute binding.

What is the best way to add the hooks needed for this element to report the form in which it is contained, so can I use Angular validation to present messages and enable / disable the submit button?

, - , - , , .

plunkr : http://plnkr.co/edit/02b9zTS1O81wgVapn3eg?p=preview

?

Answer 1

-.

, , , , .

, , :

app.directive('ruleValid', function () {
    return {
        restrict: "A",
        require: "ngModel",
        link: function (scope, element, attrs, ngModel) {

            scope.$watch(attrs.ngModel, function(thing) {
                ngModel.$setValidity(attrs.ngModel, validate(thing));
            }, true);

        }
    };
});

, , , (. plunkr validate()) , , .

, , , , .

plunkr: http://plnkr.co/edit/7I0fBZnTEU8Ss0ZYphsB?p=preview

Answer 2

. json , . ( ng-repeat, attr [34].part. ).

, ( , , ).

, , .

$scope.setValidationErrors = function ( error ) {

    $scope.myForm.$setValidity( "validation", false );
    if ( error.data ) {
        // Add error messages
        for ( var err in error.data ) {
            var sanitizedErr = err.replace( /[.\[\]]/g, '-' );
            if ( error.data.hasOwnProperty( err ) && $scope.showProviderForm[sanitizedErr] ) {
                $scope.myForm[sanitizedErr].$setValidity( "validation", false );
                $scope.myForm[sanitizedErr].$setPristine();
            }
        }
        $scope.errors = error.data;
    }
};