CODEWITHSUNDEEP
angularjs-directive
Ben
Ben

Reputation: 62364

How to eval an attribute containing {{}}

In the following directive I'd like to eval {{selectedForApproval.length}}. This worked when it wasn't a directive, but once I put that into a directive, I'm unsure how to process the binding.

HTML: <button-large color="green" ng-click="completeWork()" label="Approve Selected ({{selectedForApproval.length}})"></button-large>

Directive:

directive('buttonLarge', function () {
    return {
        scope: false,
        replace: true,
        restrict: 'E',
        template: '<button type="checkbox" class="buttonL"/>',
        link: function (scope, element, attrs) {
            var config = {
                label: "Submit",
                color: "Default"
            };

            angular.extend(config, attrs);

            element.addClass("b"+capitalize(config.color));
            element.html(scope.$parent.$eval(config.label));

            //capitalize first letter of string
            function capitalize(s) {
                return s[0].toUpperCase() + s.slice(1);
            }
        }
    }
})

Upvotes: 2

Views: 133

Answers (1)

Ben
Ben

Reputation: 62364

The solution was to use transclusion...

<button-large color="green" ng-click="completeWork()">Approve Selected ({{selectedForApproval.length}})</button-large>

directive('buttonLarge', function () {
        return {
            scope: false,
            replace: true,
            restrict: 'E',
            transclude: true,
            template: '<button type="checkbox" class="buttonL" ng-transclude/>',
            link: function (scope, element, attrs) {
                var config = {
                    color: "Default"
                };

                angular.extend(config, attrs);

                element.addClass("b"+capitalize(config.color));

                //capitalize first letter of string
                function capitalize(s) {
                    return s[0].toUpperCase() + s.slice(1);
                }
            }
        }
    })

Upvotes: 1

Related Questions