Question

我正在创建一个必须可重用且必须具有动态模板的角度js键盘指令。我找到了一些教程，我能够提出这个代码

angular.module('formApp').directive('keyboard',
    function ($compile, $http, $templateCache, config) {

    var getTemplate = function (keyboardType) {
        var templateLoader,
        baseUrl = config.baseUrl + 'Scripts/controls/keyboard/',
        templateMap = {
            defaultKeyboard: 'default.html',
            numeric: 'numeric.html',
            //add more here
        };

        var templateUrl = baseUrl + templateMap[keyboardType];
        templateLoader = $http.get(templateUrl, { cache: $templateCache });

        return templateLoader;

    }

    var linker = function (scope, element, attrs) {

        var loader = getTemplate(attrs.type);

        var promise = loader.success(function (html) {
            element.html(html);
        }).then(function (response) {
            element.replaceWith($compile(element.html())(scope));
        });
    }

    return {
        restrict: 'E',
        scope: {
            type: '='
        },
        link: linker
    };
});

示例实施

<keyboard type="defaultKeyboard"></keyboard>

我想如果我只有一个文本输入，我将永远不会有问题，因为我可以将模型绑定到指令（尚未实现），但如果表单将有几个使用键盘指令的输入控件怎么办？该指令如何知道要更新哪个模型？

something similar to this image

我正在考虑创建一个活跃的＆＃39;单击/选择该输入时将触发的标识符，以便指令知道要更新的模型。这个角度是可行的还是有更好/更清洁的方式？

由于

Answer 1

你应该使用@它将取指令值。它的batter在自定义指令中使用属性类型指令。可能的范围比较类型

     scope: {
            type: '@type' //will take value for user as string
            type: '&type' // will except expression 
            type: '='     //match everthing
            type: '=type'   //matchies scope valiable/object name
            }

具有多个模型的Angular指令

1 个答案: