AngularJS dynamic model

Question

directive

(function() {

    'use strict';

    angular
        .module('app.colorslider.directive', [])
        .directive('colorSlider', [
            '$timeout',
            '$rootScope',
            'ColorSliderService',
            function($timeout, $rootScope, ColorSliderService) {
                return {
                    restrict: 'EA',
                    scope: {
                        array: '=',
                        shape: '=',
                        shapeindex: '=',
                        type: '='
                    },
                    templateUrl: 'views/directive/colorslider.html',
                    link: function(scope, elem, attrs) {

                        console.log(scope.type);

                        scope.fill = {
                            blue: 128,
                            green: 128,
                            red: 128,
                            opacity: 1
                        }

                        scope.stroke = {
                            blue: 128,
                            green: 128,
                            red: 128,
                            opacity: 1,
                            width: 1
                        }
                        scope.colorSlider = function() {
                            scope[scope.type].combined = ColorSliderService.rgbToHex(parseInt(scope[scope.type].red), parseInt(scope[scope.type].green), parseInt(scope[scope.type].blue));
                            console.log(scope[scope.type].combined);
                        };
                    }

                };
            }
        ]);
}());

html

<color-slider type="'stroke'" shape="selectedshape" array="linesArray" shapeindex="selectedshapeindex"></color-slider>

<color-slider type="'fill'" shape="selectedshape" array="linesArray" shapeindex="selectedshapeindex"></color-slider>

colorslider.html

<input class="colorInt" type="text" size="3" id="redInt" maxlength="3" value="{{[type].red}}" style="display: none">

I made the above directive so that it will stand as a way to choose the color for a stroke and also fill colors. The directive attribute allow the type to be passed in to the directive scope.

The directive loads but I have noticed that colorslider.html doesn't display the value at all, what have I missed here?

Is this the wrong way to display a value in the directive template? value="{{[type].red}}"

dfsq · Accepted Answer · 2015-04-26 20:12:47Z

2

Directive template will look like this:

<input class="colorInt" type="text" value="{{this[this.type].red}}" size="3" id="redInt" maxlength="3">

Inside of template this points to current scope object. So this.type in template corresponds to scope.type in link function. Similarly scope[scope.type].combined in link function translates to this[this.type].combined in template.

answered Apr 26, 2015 at 20:12

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

Collectives™ on Stack Overflow

AngularJS dynamic model

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related