javascript - AngularJS 动态模型

Question

指令

(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">

我制定了上述指令，以便它可以作为一种方式来为 stroke 和 fill 颜色选择颜色。指令属性允许将 type 传递到指令范围。

指令已加载，但我注意到 colorslider.html 根本不显示值，我在这里错过了什么？

这是在指令模板中显示值的错误方式吗？ value="{{[type].red}}"

Answer 1

指令模板将如下所示:

<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。