将attrs指令放入模板中.AngularJS

Put attrs directive in the template. AngularJS

本文关键字：AngularJS attrs 指令      更新时间：2023-09-26

我有下一个代码：

appForm.directive('inputRadio', function(){
    return {
        restrict: 'E',
        link: function (scope, elem, attrs){
        },
        compile: function(elem, attrs){
            return {
                pre: function preLink( scope, elem, attrs ) {
                },
                post: function postLink( scope, elem, attrs ) {
                }
            }
        },
        template: '' +
        '<div class="radio">' +
        '<label class="required"><input type="radio" id="attrs.twigId" name="attrs.twigName" ng-model="optionMultipleChoice" ng-required="required" value="attrs.twigValue" >attrs.twigLabel</label> ' +
        '</div>'
    }
});

我想将具有变量"attrs"的属性直接放入模板中，例如id="attrs.twigid"。不太清楚如何做，如果你在编译或链接中做。。。

谢谢！

编辑：

appForm.directive('inputRadio', function(){
    return {
        restrict: 'E',
        link: function (scope, elem, attrs){
        },
        compile: function(elem, attrs){
            return {
                pre: function preLink( scope, elem, attrs ) {
                    scope.varstwig = attrs;
                },
                post: function postLink( scope, elem, attrs ) {
                }
            }
        },
        template: '' +
        '<div class="radio">' +
        '<label class="required"><input type="radio" id="[[ varstwig.twigid ]]" name="[[ varstwig.twigname ]]" ng-model="optionMultipleChoice" ng-required="required" value="[[ varstwig.twigvalue ]]" >[[ varstwig.twiglabel ]]</label> ' +
        '</div>'
    }
});

这段代码是有效的，但它有一个错误，如果几个指令实例的"范围"将被覆盖，从而使所有指令都具有相同的值。

有人知道该怎么解决吗？

调用如下：

{% block _test_optionsExpanded_widget %}
    <div class="form-group">
        <label class="control-label required">Options expanded</label>
        <div id="test_optionsExpanded">
            {% for option in form.children %}
                <input_radio twigId="{{ option.vars.id }}" twigName="{{ option.vars.full_name }}" twigValue="{{ option.vars.value }}" twigLabel="{{ option.vars.label }}" twigShortName="{{ option.vars.name }}"></input_radio>
            {% endfor %}
        </div>
    </div>
{% endblock %}

我找到了解决方案。。哈哈

如果我将变量范围定义为"@"，它不会被覆盖，并且每个指令都有特定的值​​小树枝给的。

感谢所有人：）

appForm.directive('inputRadio', function(){
        return {
            restrict: 'E',
            scope: {
                varstwig: '@'
            },
            link: function (scope, elem, attrs){
            },
            compile: function(elem, attrs){
                return {
                    pre: function preLink( scope, elem, attrs ) {
                        scope.varstwig = attrs;
                    },
                    post: function postLink( scope, elem, attrs ) {
                    }
                }
            },
            template: '' +
            '<div class="radio">' +
            '<label class="required"><input type="radio" id="[[ varstwig.twigid ]]" name="[[ varstwig.twigname ]]" ng-model="optionMultipleChoice" ng-required="required" value="[[ varstwig.twigvalue ]]" >[[ varstwig.twiglabel ]]</label> ' +
            '</div>'
        }
    });

如果我理解正确，您需要在HTML元素中设置一些属性。只需隔离范围。

appForm.directive('inputRadio', function(){
    return {
    restrict: 'E',
    scope: {
       twigId : "=",
       twigName: "=",
       twigValue: "=",
       twigLabel: "="
    },
    link: function (scope, elem, attrs){
    },
    compile: function(elem, attrs){
        return {
            pre: function preLink( scope, elem, attrs ) {
            },
            post: function postLink( scope, elem, attrs ) {
            }
        }
    },
    template: '' +
    '<div class="radio">' +
    '<label class="required"><input type="radio" id="{{twigId}}" name="{{twigName}}" ng-model="twigValue" ng-required="required" >{{twigLabel}}</label> ' +
    '</div>'
}
});

这样的东西应该行得通。你可能得检查一下那台收音机的参数。我不确定你想做什么。

请注意，twigValue中的"="："="和其他具有特定含义。

如果您的属性绑定到父作用域中其他地方的变量，请使用"="；如果您的特性只是一个值，则使用"@"。

https://umur.io/angularjs-directives-using-isolated-scope-with-attributes/

相关文章：