Passing a value from controller to directive AngularJs

Question

I want to pass a value from the controller to the directive but the directive in the view can be overridden.

Example Controller

    var controllers = angular.module('Project.Controllers.ActionBarCtrl', []);
    controllers.controller('ActionBarCtrl', ['$scope','$rootScope', 
        function($scope, $rootScope){
        $scope.buttonColor = 'red' 
}]);

Then in my view there are two possible ways to load

<div my-button button-color='green'></div>

or

<div my-button></div>

in the directive i want to pass in the button color (green in the first div and the default of red in the second div), here is my directive

sharedDirectives.directive('myButton', function () {
    return {
        restrict: 'A',
        transclude: true,
        scope: {
            'buttonColor': '@'
        },
        template: '<div>' +
                    '<button class="uifw-frm-button small {{buttonColor}}" ng-click="showHideInner()">
                 + </div>

I can get it to work with the first div and populating the buttonColor property with the value of green but when i leave it out and want to return red I get the value as undefined.

Srinath Mandava · Accepted Answer · 2014-07-11 10:50:31Z

1

using ng-class

template: '<div>' +
            '<button class="uifw-frm-button small" ng-class="{'red':!buttonColor,buttonColor:buttonColor}" ng-click="showHideInner()">
         + </div>

edited Jul 11, 2014 at 10:50

answered Jul 11, 2014 at 10:44

Srinath Mandava

3,4722 gold badges27 silver badges37 bronze badges

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

Comments

Raphael Müller · Accepted Answer · 2014-07-11 10:52:50Z

1

try to add the compile function to your directive:

compile: function(element, attrs)
{
   if (!attrs.buttonColor) { attrs.buttonColor= 'red'; }
}

~~or in the controller of the directive:~~

~~controller: function($scope){ $scope.buttonColor = $scope.buttonColor || 'red'; }~~

ok, the one with compile works:

http://jsfiddle.net/eYJqC/

edited Jul 11, 2014 at 10:52

answered Jul 11, 2014 at 10:42

Raphael Müller

2,2002 gold badges16 silver badges20 bronze badges

1 Comment

Win Over a year ago

Thanks for this answer, i gave it a try however more functionality was needed after the button click and the 'compile: ...' stoped any further code from executing. So the answer that i used is the one I chose above. I dont know what if i was doing something wrong after the compile, but this didnt allow for any other code to run.

Collectives™ on Stack Overflow

Passing a value from controller to directive AngularJs

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