Dynamic AngularJS 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 directive above so that it stands as a way to choose a color for the flowers strokeas well fill. The directive attribute allows you to pass directives to typethe scope.

The directive is loading, but I noticed that colorslider.html does not display the value at all, what did I miss here?

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

Answer 1

The directive template will look like this:

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

this . , this.type scope.type . scope[scope.type].combined this[this.type].combined .