Angular.js binding model to directive

Question

I'm trying to put together an Angular directive that will be a replacement for adding

ng-disabled="!canSave(schoolSetup)"

On a form button element where canSave is a function being defined in a controller something like the following where the parameter is the name of the form.

$scope.canSave = function(form) {
    return form.$dirty && form.$valid;
};

Ideally I'd love the directive on the submit button to look like this.

can-save="schoolSetup"

Where the string is the name of the form.

So... how would you do this? This is as far as I could get...

angular.module('MyApp')
    .directive('canSave', function () {
        return function (scope, element, attrs) {

            var form = scope.$eval(attrs.canSave);

            function canSave()
            {
                return form.$dirty && form.$valid;;
            }

            attrs.$set('disabled', !canSave());
        }

    });

But this obviously doesn't bind properly to the form model and only works on initialisation. Is there anyway to bind the ng-disabled directive from within this directive or is that the wrong approach too?

kostik · Accepted Answer · 2013-09-04 22:54:55Z

3

angular.module('MyApp')
    .directive('canSave', function () {
        return function (scope, element, attrs) {
            var form = scope.$eval(attrs.canSave);

            scope.$watch(function() {
                return form.$dirty && form.$valid;
            }, function(value) {
                value = !!value;
                attrs.$set('disabled', !value);
            });
        }
    });

Plunker: http://plnkr.co/edit/0SyK8M

edited Sep 4, 2013 at 22:54

answered Sep 4, 2013 at 22:38

kostik

1,19911 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

zs2020 · Accepted Answer · 2013-09-04 22:41:18Z

2

You can pass the function call to the directive like this

function Ctrl($scope) {
    $scope.canSave = function () {
        return form.$dirty && form.$valid;
    };
}

app.directive('canSave', function () {
    return {
        scope: {
            canSave: '&'
        },
        link: function (scope, element, attrs) {
            attrs.$set('disabled', !scope.canSave());
        }
    }
});

This is the template

<div ng-app="myApp" ng-controller="Ctrl">
    <div can-save="canSave()">test</div>
</div>

You can see the function is called from the directive. Demo

answered Sep 4, 2013 at 22:41

zs2020

54.7k30 gold badges157 silver badges223 bronze badges

1 Comment

markstewie Over a year ago

Thanks for your answer! Would work like this but was trying to remove the controller from being needed.

Collectives™ on Stack Overflow

Angular.js binding model to directive

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related